无法动态创建和添加div和span元素

Question

我正在编写一个HTML代码，其中有一个名为y的div，这个div在我的HTML主体中，还有一个按钮。当用户点击此按钮时，我想要执行以下操作：

1. 创建另一个带有类smallBar的div。
2. 在此
   内，我想要创建3个。
3. 将此（总共smallBar）内容添加到
   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/

谢谢

- user3872094

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时，它将其视为字符串而不是对象，因此您在div中看到[object HTMLDivElement]。相反，您可以使用innerHTML像这样进行操作：document.getElementById("y").innerHTML = div.outerHTML; 了解更多关于innerHTML的信息

- Sanchit Patiyal

Answer 2

除了Sanchit提到的.appendChild()，另一种选项是.insertAdjacentElement()

function createDiv() {
  var div = document.createElement("div");
  div.className = "smallBar";
  div.textContent = "div";
  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").insertAdjacentElement("beforeend", div);
}

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

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

- Andreas

Answer 3

应该是

。

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

您直接分配了div元素。而您应该获取它的innerHTML。

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

当您单击按钮并检查元素时，您会看到目标div内部的span。

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

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

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

如果您想附加整个div，您可以尝试使用appendChild，正如其他人指出的那样。

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

- Suresh Atta

Answer 4

如果你想使用innerHTML而不是appendChild，因为后者会在每次点击按钮时添加div，那么你需要使用。

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

代替

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

'div'是HTMLDivElement对象，而innerHTML仅接受字符串。使用outerHTML可以保留'smallBar' Div。如果您使用

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

您只会在 'y' Div 内看到3个 span，而不是 'smallBar' Div。

- Mahesh Hegde

Answer 5

你是想这样做吗？

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

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

- Nikhil Eshvar