Question

我正在尝试在<span id="options"></span>中添加html代码，所以我试图使用它：

function editTextArea(element) {
   var options = document.getElementById("options");
   options.innerHTML = options.innerHTML + "Cols: <input type='text' id='colsTextArea' maxlength='3' /><br>Rows: <input type='text' id='rowsTextArea' maxlength='2' /><br><button type='button' onclick='updateTextArea('" + element.id + "')' >Add</button><br>";
}

但这就是我得到的，

<button type="button" onclick="updateTextArea(" textarea0')'="">Agregar</button>

我的问题在于引号，所以我后来尝试使用createElement（“button”），但现在我无法添加onclick属性。

我没有使用jQuery，所以如果没有它就能找到解决方案。

Answer 1

对于updateTextArea的函数调用，您需要使用与onclick属性不同的引号。你不能做onclick ='alert（'hi'）;'，因为单引号终止了onclick属性。

function editTextArea(element) {
   var options = document.getElementById("options");
   options.innerHTML = options.innerHTML + "Cols: <input type='text' id='colsTextArea' maxlength='3' /><br>Rows: <input type='text' id='rowsTextArea' maxlength='2' /><br><button type='button' onclick='updateTextArea(" + '"' + + element.id + '"' + ")' >Add</button><br>";
}

您应该至少考虑使用正确的DOM API调用来做这件事。你是对的尝试document.createElement

要设置onclick，请执行以下操作：

var button = document.createElement('button').
button.onclick = function(){
 alert('I was clicked');
}

Answer 2

如果你要使用第二个选项，你可以使用setAttribute（）方法。

var ele = document.createElement('button'); ele.setAttribute('onclick','method_name');

Answer 3

也可以通过转义引号来完成：

options.innerHTML = options.innerHTML + "Cols: <input type='text' id='colsTextArea' maxlength='3' /><br>Rows: <input type='text' id='rowsTextArea' maxlength='2' /><br><button type='button' onclick=\"updateTextArea(\'" + id + "\')\" >Add</button><br>";

添加具有innerHTML属性的按钮

3 个答案: