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

Question

我正在写一个有代码的HTML代码,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/

谢谢

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" />

PS - InnerHTML给出/设置一个String,表示一个元素的HTML内容.当你这样做时document.getElementById("y").innerHTML = div,它将它作为一个字符串,而不是一个对象,因此你[object HTMLDivElement]在div中看到.相反,你可以innerHTML像这样做document.getElementById("y").innerHTML = div.outerHTML;

阅读有关innerHTML的更多信息