JavaScript - append() 不是附加按钮，而是文本

Question

例子:

var buttonHTML = "<button>MyButton</button>";
document.getElementById("myDiv").append(buttonHTML);

在这种情况下，该函数最终将文本附加到 div 中。

但是，如果我对 JQ 做同样的事情:

$("#myDiv").append(buttonHTML);

在这种情况下，它实际上会附加按钮。现在，由于各种原因，我不得不使用纯 JS(而不是 JQ)。

有人有什么想法吗？

Answer 1

我不确定它是如何与你一起工作的，并在此处附加元素作为文本，因为纯 JS 中没有 .append 函数

但我同意@Sam Judge said in his answer ，并且还想提一下，您可以使用 javascript 来完成它，而无需使用 javascript 函数一个一个地创建节点 Element.insertAdjacentHTML()

insertAdjacentHTML() parses the specified text as HTML or XML and inserts the resulting nodes into the DOM tree at a specified position. It does not reparse the element it is being used on and thus it does not corrupt the existing elements inside the element. This avoiding the extra step of serialization make it much faster than direct innerHTML manipulation.

还有另一个选项可以使用 .innerHTML 执行相同的操作但可以肯定的是，您需要保存已经在里面的内容才能实现追加效果。