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

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

1. 创建另一个 div （类为smallBar)
2. 里面这个div，我想创建3个跨度。
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]。请让我知道我哪里出了问题以及如何解决这个问题。

这是我的小提琴https://jsfiddle.net/d9hg0vkk/

Thanks

您正在使用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]在 div 中。相反，你可以这样做innerHTML像这样document.getElementById("y").innerHTML = div.outerHTML;

阅读更多关于innerHTML的内容