用Java语言“附加”

Question

我试图在不使用框架的情况下学习JS。对以下内容略有疑问：

<div class="js-button"></div>

在jQuery中，我可以使用以下命令创建一个提交按钮：

$("<button type='submit'>Save</button>").appendTo($(".js-button"));

在普通的JS中，我可以这样做：

document.querySelector(".js-button").innerHTML += "<button type='submit'>Save</button>";

这是完全一样的，对吧？还有其他方法吗？如果您碰巧在写作上=犯了错误，而+=不是您会碰到我要避免的大问题。

Answer 1

这是完全一样的，对吧？

不，一点也不，尽管很容易理解为什么会这样。+=与一起使用几乎是不正确的innerHTML。这样做会强制浏览器执行以下操作：

• 遍历元素的内容以构建HTML字符串
• 将您的字符串附加到该字符串
• 销毁元素的所有内容
• 解析字符串以构建新内容，并将其放入元素中

...除了大量不必要的工作外，还会丢失事件处理程序，复选框/单选按钮的选中状态，select元素中的选定选项等。

而是使用insertAdjacentHTML或createElement/ createTextNode和appendChild。请参阅MDN上的DOM。在该特定示例中：

document.querySelector(".js-button").insertAdjacentHTML(
    "beforeend",
    "<button type='submit'>Save</button>"
);

<div class="js-button"></div>