Javascript appendChild() 不起作用。答案

【问题标题】：Javascript appendChild() not working.Javascript appendChild() 不起作用。
【发布时间】：2015-11-21 00:38:57
【问题描述】：

我不知道为什么以下内容不起作用。

HTML：

    ...    
        <div class="col2">
            <h2>Your Groups</h2>
            <input type="submit" id="addnew" class="btn btn-primary" value="Create New Group"/> 
            <div id="parent">
                <!--new div here-->
            </div>
        </div> 
    ...

Javascript：

document.getElementById('addnew').onclick = function(){

    var parent = document.getElementById('parent'); 
    var newGroup = document.createElement("div"); 
    newGroup.setAttribute("id", "newGroup"); 
    newGroup.setAttribute("class", "inner");
    parent.appendChild(newGroup); 
};

提前感谢您的帮助。

【问题讨论】：

“不工作”是指它没有被插入吗？
请阅读How do I ask a good question?
似乎有效？ jsfiddle.net/135r1rbq - 如果您希望 div 有内容，请使用 newGroup.textContent = "example";

标签： javascript appendchild

【解决方案1】：

您的代码正在运行（假设您的 JS 位于这些元素下方）。您只是没有在元素中设置任何内容。

首先，您应该了解浏览器中的 Web 开发人员工具。点击“F12”，然后在出现的窗口的“元素”选项卡中找到“父”div。找到“父”元素后，单击您的按钮。您会看到您的新 div 出现在“父级”下。

但是，它没有渲染任何内容，因为它没有内容。简单的做

newGroup.textContent = "Hello, world!";

使用 document.createElement 创建元素后，您的子项中将包含内容。

另外，不要将每个孩子的 id 设置为相同的值。 HTML 中的 ID 是唯一的。您或许还应该考虑在代码中使用 addEventListener 而不是 onclick。

【讨论】：

【解决方案2】：

你想做什么？您是否尝试在函数之外访问 parent 和 newGroup ？如果是这样，您需要在函数外部声明变量。

var parent;
var newGroup;

document.getElementById('addnew').onclick = function(){

var parent = document.getElementById('parent'); 
var newGroup = document.createElement("div"); 
newGroup.setAttribute("id", "newGroup"); 
newGroup.setAttribute("class", "inner");
parent.appendChild(newGroup); 
};

您只是显示一个空的 div，所以如果您想知道为什么什么都看不到，那可能就是原因。尝试添加一个简单的字符串或 CSS 样式以查看您的新 div。这是一个例子：http://jsfiddle.net/inspiredtolive/Lrydh3ar/2/

【讨论】：