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

Question

例子：

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

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

但是，如果我对 JQ 也这样做：

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

在这种情况下，它实际上会附加按钮。现在，出于各种原因，我必须使用纯 JS（而不是 JQ）。

谁有想法？

Answer 1

这是因为你的 varbuttonHTML只是一个文本字符串，如果你将它作为子元素附加，它将创建一个 DOM textNode，而不是一个 elementNode。相反，您想要做的是类似于以下内容的操作：

var buttonHTML = document.createElement("button");
var buttonText = document.createTextNode("MyButton");
buttonHTML.appendChild(buttonText);

document.getElementById("myDiv").appendChild(buttonHTML)