'；追加'；在Javascript中

我正在尝试不使用框架来学习JS。以下是一个小小的疑问：

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

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

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

$（“保存”）.appendTo（$（.js按钮”）；

在普通JS中，我可以做到：

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

document.querySelector（“.js按钮”）.innerHTML+=“保存”；

这完全一样，对吗？还有其他方法吗？如果你碰巧犯了写

=

的错误，而不是

+=

，你可能会遇到我试图避免的大问题

这完全一样，对吗

不，一点也不，不过很容易理解你为什么会这样想。将

+=

与

innerHTML

一起使用几乎是不正确的。这样做会强制浏览器执行以下操作：

• 旋转元素的内容，生成一个HTML字符串
• 将字符串附加到该字符串
• 销毁元素的所有内容
• 解析字符串以构建新内容，并将其放入元素中

…除了相当多的不必要工作之外，还会丢失事件处理程序、复选框/单选按钮的选中状态、

select

元素中的选中选项等

相反，请使用

insertAdjacentHTML

或

createElement

/

createTextNode

和

appendChild

。看见在这个具体例子中：

document.querySelector（“.js按钮”）.insertAdjacentHTML(
“之前”，
“保存”
);
我想演示一下将
+=
与innerHTML一起使用与将
=
与innerHTML一起使用的区别，并回答以下问题：

如果你碰巧犯了写=而不是+=的错误，你可能会遇到我尽量避免的大问题

innerHTML+=
将
+=
与innerHTML一起使用并将2000项附加到一个div时，渲染大约需要4秒钟


let div=document.querySelector（'div'））
console.time（'append innerHTML'）
for（设i=0；i<2000；i++）{
div.innerHTML+='你好
'
}
console.timeEnd（'append innerHTML'）
在循环中使用
+=
和
innerHTML
时，它将大大降低更新dom的速度。因此，在本例中，构建整个html字符串，然后使用
…innerHTML=myHTMLString
，这与jQuery在内部使用
appendChild（）
和其他节点相关方法并不完全相同，但结果将是相同的。“…在JavaScript中。”使用jQuery的代码已经是JavaScript了。您要问的是如何使用DOM而不是jQuery来实现这一点。（这是一个好问题。）