JavaScript-append（）不追加按钮，但追加文本

例如：

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

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

---

有人有什么想法吗？

这是因为您的var

按钮tml

只是一个文本字符串，如果您将其作为子项追加，它将创建一个DOM textNode，而不是elementNode。您想做的是以下几点：

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

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

---

我不确定它是如何与您一起工作的，并将元素作为文本追加到这里，因为纯JS中没有.append函数

但我同意这一点，我还想提一下，您可以使用javascript来实现这一点，而无需使用javascript函数逐个创建节点

insertAdjacentHTML（）将指定的文本解析为HTML或XML，然后 将生成的节点插入DOM树中的指定位置。 它不会重新分析正在使用它的元素，因此它会这样做 不损坏元素内的现有元素。这避免了 序列化的额外步骤使它比直接序列化快得多 innerHTML操作

还有另一个选项可以使用来执行相同的操作，但是可以肯定的是，您需要保存内部已经存在的内容以实现附加效果。

您可以尝试此代码

函数myFunction（）{
var myButton=document.createElement（“按钮”）；
myButton.style.width=“100px”；
myButton.style.height=“30px”；
myButton.style.background=“灰色”；
myButton.style.color=“白色”；
myButton.innerHTML=“myButton”；
document.getElementById（“demo1”）.appendChild（myButton）；
}

创建另一个按钮

您好。谢谢你的回复。我刚才才意识到这一点。我想我只是好奇为什么JQ对待这件事的态度不同，但话说回来，这没什么区别。再次感谢您的确认！好的，jQuery只是一个可以使用的库，所以它如何处理DOM取决于编写它的社区，而不是任何官方规范。通常它比vanilla JS直观得多，但是使用vanilla JS以便熟悉DOM是一个好主意，我强烈推荐它！

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

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