添加新元素后JavaScript不起作用

使用JavaScript追加新元素时出现问题。我没有使用任何库，如jQuery或其他任何东西，我在使用本机JavaScript时这样做。添加新元素后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来追加新元素，那么它的工作原理，有没有更少？

来源

2017-10-20 int11

*，但使用原生的JavaScript时，必须用'innerHTML' *你在哪里学习？ – 2017-10-20 19:04:35

[可以附加到innerHTML而不破坏后代的事件侦听器吗？]（https://stackoverflow.com/questions/595808/is-it-possible-to-append-to-innerhtml-without-destroying -descendants-event-list） – Xufox

有趣的事实：jquery没有使用innerHTML来做这件事 – GottZ

你用全部新内容替换了你的身体的全部内容，消除了附加到它们的任何元素和任何事件。

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

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

 
    document.body.appendChild(p); 
 
});

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

来源

2017-10-20 19:02:17 JLRishe

哇，现在我知道正确的方式来追加一个新的元素，谢谢先生！ – int11

试试这个


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

 
});

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

来源

2017-10-20 19:12:18

或者，如果你将要追加多个项目，创建一个文档片段，做所有你的初步工作，然后将其附加到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);

来源

2017-10-20 19:19:32 Tom

添加新元素后JavaScript不起作用

回答

相关问题