Question

使用JavaScript追加新元素时遇到问题。我不使用任何库，如jQuery或其他任何东西，我在使用本机JavaScript时。

好的，我正在尝试将新元素附加到<body>标记。如果在jQuery中您可以使用.append()函数，但在使用本机JavaScript时，您必须使用.innerHTML。

这是我的HTML代码

<button id="add">
Add
</button>

这是我的JavaScript代码

document.getElementById("add").addEventListener("click", (e) => {
  document.getElementsByTagName("body")[0].innerHTML += '<p>Hello world</p>';
});

当我点击“添加”按钮时，它第一次工作。但是，当我再次点击它不起作用。当我尝试使用jQuery追加新元素然后它起作用时，有没有更少？

Answer 1

您正在用所有新内容替换您身体的全部内容，消除任何元素以及附加到其上的任何事件。

不要覆盖.innerHTML。使用.appendChild()：

＆＃13;

document.getElementById('add').addEventListener('click', function() {
    var p = document.createElement('p');
    p.textContent = 'Hello world';

    document.body.appendChild(p);
});

＆＃13;

<button id="add">Add</button>

＆＃13;

Answer 2

或者，如果您要附加多个项目，请创建一个文档片段，对其进行所有初步工作，然后将其附加到DOM。这种方法的优点是DOM只会被重绘一次。例如：

var frag = document.createDocumentFragment();

var topSquare = document.createElement('div');
frag.appendChild(topSquare);

var rightSquare = document.createElement('div');
frag.appendChild(rightSquare);

document.getElementsByTagName('body')[0].appendChild(frag);

或者，如果您出于某种原因必须使用HTML字符串，请使用以下方法：

var htmlString = '<p>Hello world</p>';
var para = document.createRange().createContextualFragment(htmlString);
document.getElementsByTagName('body')[0].appendChild(para);

Answer 3

试试这个

＆＃13;

input[MAX_SIZE]

＆＃13;

   
document.getElementById("add").addEventListener("click", (e) => {
	
 document.getElementById("k").innerHTML += '<p>Hello world</p>';

});

＆＃13;

附加新元素后，JavaScript无效

3 个答案: