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

【问题标题】：JavaScript - append() not appending a button, but textJavaScript - append() 不是附加按钮，而是附加文本
【发布时间】：2016-12-26 18:13:40
【问题描述】：

例子：

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

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

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

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

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

有人有什么想法吗？

【问题讨论】：

标签： javascript appendchild

【解决方案1】：

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

但我同意@Sam Judge said in his answer的说法，并且还想提一下，您可以使用javascript来做到这一点，而无需使用javascript函数Element.insertAdjacentHTML()一一创建节点

insertAdjacentHTML() 将指定的文本解析为 HTML 或 XML 并将生成的节点插入到指定位置的 DOM 树中。它不会重新解析它正在使用的元素，因此它会不会破坏元素内部的现有元素。这避免序列化的额外步骤使其比直接更快 innerHTML 操作。

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

【讨论】：

【解决方案2】：

这是因为您的 var buttonHTML 只是一个文本字符串，如果您将其作为子项附加，它将创建一个 DOM textNode，而不是 elementNode。您想要做的是类似于以下内容：

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

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

【讨论】：

嗨。感谢您的回复。我刚刚才真正想通了。
我想我只是好奇为什么 JQ 会以不同的方式对待它，但话又说回来并没有太大区别。再次感谢您的确认！
嗯，jQuery 只是一个你可以使用的库，所以它如何处理 DOM 取决于编写它的社区，而不是任何官方规范。通常它比 vanilla JS 直观得多，但是使用 vanilla JS 来熟悉 DOM 是个好主意，我强烈推荐它！

【解决方案3】：

你可以试试这个代码

function myFunction() {
  var myButton= document.createElement("button");
  myButton.style.width = "100px";
  myButton.style.height = "30px";
  myButton.style.background = "grey";
  myButton.style.color = "white";
  myButton.innerHTML = "MyButton";

  document.getElementById("demo1").appendChild(myButton);
}

<button type="button" onclick="myFunction()">create another button</button>

<p id="demo1"></p>

【讨论】：