Question

我动态创建和删除元素＆＃34; a＆＃34;和＆＃34;按钮＆＃34;在页面上。我想添加处理程序＆＃34; onclick＆＃34;我创造它们时对他们。我到目前为止看到的所有例子都是jquery。我怎么能用纯JavaScript来做到这一点？

Answer 1

你可以这样做：

for(var i=0;i<5;i++){
  var a = document.createElement("a");
  a.innerHTML="a"+i;
  document.body.appendChild(a);
  var button = document.createElement("button");
  button.innerHTML="button"+i;
  button.onclick = function(){
    console.log("event on button");
  }
  document.body.appendChild(button);
}

Answer 2

您可以使用addEventListener在动态按钮上添加点击侦听器。

var btn = document.createElement("button");
btn.addEventListener('click', function(){
    alert('button clicked!');
}, false);
document.body.appendChild(btn);

Answer 3

此示例将创建一个包含一些文本的按钮，并将其添加到ID为test的元素。

var btn = document.createElement('button');
btn.appendChild(document.createTextNode('test'));

btn.addEventListener('click', function() {
    alert('it works');
}, false);

document.getElementById('test').appendChild(btn);

希望这会帮助你。

Answer 4

来自：https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

HTML内容

<table id="outside">
    <tr><td id="t1">one</td></tr>
    <tr><td id="t2">two</td></tr>
</table>

JavaScript内容

// Function to change the content of t2
function modifyText() {
  var t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// add event listener to table
var el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

添加＆＃34; onclick＆＃34;处理器到纯javascript中动态创建的元素

4 个答案: