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（）将指定的文本解析为HTML或XML 将结果节点插入到指定位置的DOM树中。它不会重新解析它正在使用的元素，因此它会不破坏元素内部的现有元素。这避免了序列化的额外步骤使它比直接更快 innerHTML操作。

你也可以使用.innerHTML做同样的事情，但是你肯定需要保存已经存在的内容来做追加效果。

Answer 2

这是因为你的var buttonHTML只是一个文本字符串，如果你把它作为子项附加，它将创建一个DOM textNode，而不是elementNode。您想要做的事情是以下几点：

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

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

Answer 3

您可以尝试此代码

h = Hand()
h.cards = [Card(13,1),Card(13,2),Card(13,3),Card(8,2)]
print(h.score())

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);
}

JavaScript - append（）不附加按钮，而是附加文本

3 个答案: