使用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追加新元素然后它工作,有没有更少？
您将使用所有新内容替换身体的全部内容,消除任何元素以及附加到其上的任何事件.
不要覆盖.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>