JavaScript：向DIV添加子元素

Question

在下面的代码中，"objTo"是一个div，我需要向其中插入多个div元素。当我第一次使用这段代码时，它可以正常工作。但在下一次使用时，它会覆盖现有的代码。

     <script>

var divtest= document.createElement("div");        
divtest.innerHTML = "<div>new div</div>"         
objTo.appendChild(divtest)
    </script>

我哪里出错了？

- user1357872

---

多次运行该代码不会覆盖任何东西（除了您不再需要的引用）。我怀疑您已经创建了一个简化的测试用例，将问题简化了。 - Quentin

Answer 1

我为你制作了一个非常简单的工作版本：

http://jsfiddle.net/hQKy9/

多次点击一直有效：

脚本：

function addDiv() {
    var objTo = document.getElementById('container');
    var divtest = document.createElement("div");
    divtest.innerHTML = "new div";
    objTo.appendChild(divtest);
}

HTML

<div id="container"></div>

<input type="button" onclick="addDiv();" value="Click here to add div"/>

- Marc Uberstein

Answer 2

即使Marc在我找到答案之前就已经给出了答案，我们仍然可以做得更多，例如像我所做的那样添加ID/Class和CSS。

const newChild = document.createElement('div');
newChild.id = 'newly_content';
newChild.innerHTML = `
    <p style="font-size: 30px;padding: 200px 0px 10px 0px;">
        A new content has been created!
    </p>
`;
document.getElementById('ItemID').appendChild(newChild);

- W Kenny