Question

我正在编写一个包含div y的HTML代码，这是在我的HTML正文中，并且有一个按钮。当用户点击此按钮时，我想执行以下操作。

创建另一个div（类为smallBar）
在此div内，我想创建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" />

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

document.getElementById("y").innerHTML = div.outerHTML;来完成此操作

Read More about innerHTML

Answer 2

应该是

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

您正在直接分配div元素。在哪里你应该得到它的innerHTML

https://jsfiddle.net/d9hg0vkk/2/

单击按钮并检查元素并查看。你会看到目标div内的跨度。

＆＃13;

function createDiv() {
  var div = document.createElement("div");
  div.className = "smallBar";
  var span1 = document.createElement("span");
  span1.className = "span1";
  span1.textContent= "span1"
  var span2 = document.createElement("span");
  span2.setAttribute("class", "span1");
  span2.textContent= "span2"
  var span3 = document.createElement("span");
  span3.setAttribute("class", "span1");
  span3.textContent= "span3"

  div.appendChild(span1);
  div.appendChild(span2);
  div.appendChild(span3);

  document.getElementById("y").innerHTML = div.innerHTML;
}

＆＃13;

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

＆＃13;

或者如果你想追加整个div，你可以尝试使用appendChild作为其他指向

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

Answer 3

你是这样想的吗？

document.getElementById("y").innerHTML = "<div>ABC</div>";

链接： https://jsfiddle.net/d9hg0vkk/1/

Answer 4

如果你想使用innerHTML而不是每次点击按钮时附加div的appendChild，你必须使用

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

而不是

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

因为'div'是HTMLDivElement对象而innerHTML只接受字符串。通过使用outerHTML，您也可以保留'smallBar'Div。如果你使用

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

你会看到div'y'中只有3个跨度而不是'smallBar'Div。

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

4 个答案: