javascript - 无法动态创建和附加 div 和 span

Question

我正在编写一个 HTML 代码，其中有一个 div 说 y，它在我的 HTML 正文中，并且有一个按钮。当用户单击此按钮时，我想执行以下操作。

1. 创建另一个 div(类为 smallBar)
2. 在这个 div 中，我想创建 3 个 span。
3. 将此(总 smallBar)个内容添加到 div y。

这是我当前的代码。

HTML

<div class="y" id="y">

</div>
<input type="button" onclick="createDiv()" value="click me" />

JS

function createDiv() {
  var div = document.createElement("div");
  div.className = "smallBar";
  var span1 = document.createElement("span");
  span1.className = "span1";
  var span2 = document.createElement("span");
  span2.setAttribute("class", "span1");
  var span3 = document.createElement("span");
  span3.setAttribute("class", "span1");

  div.appendChild(span1);
  div.appendChild(span2);
  div.appendChild(span3);

  document.getElementById("y").innerHTML = div;
}

在这里，当我单击按钮时，它没有创建 div，而是给我作为 [object HTMLDivElement] 的消息。请让我知道我哪里出错了，我该如何解决。

这是我的 fiddle https://jsfiddle.net/d9hg0vkk/

谢谢

Answer 1

您正在使用 innerHTML 而不是您需要使用 appendChild()

function createDiv() {
  var div = document.createElement("div");
  div.className = "smallBar";
  var span1 = document.createElement("span");
  span1.className = "span1";
  span1.innerHTML="Spam1";
  var span2 = document.createElement("span");
  span2.setAttribute("class", "span2");
  span2.innerHTML="Span2";
  var span3 = document.createElement("span");
  span3.setAttribute("class", "span3");
  span3.innerHTML="Span3";

  div.appendChild(span1);
  div.appendChild(span2);
  div.appendChild(span3);

  document.getElementById("y").appendChild(div);
}

<div class="y" id="y">

</div>
<input type="button" onclick="createDiv()" value="click me" />

P.S- InnerHTML 提供/设置一个字符串，表示元素的 HTML 内容。当你执行 document.getElementById("y").innerHTML = div 时，它将它作为一个字符串而不是一个对象，因此你会看到 [object HTMLDivElement]股利。相反，您可以像这样使用 innerHTML document.getElementById("y").innerHTML = div.outerHTML;

Read More about innerHTML