Javascript appendChild() 不工作。
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33838339/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript appendChild() not working.
提问by Z. Wood
I am at a loss as to why the following is not working.
我不知道为什么以下内容不起作用。
HTML:
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:
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);
};
Thank you in advance for your help.
预先感谢您的帮助。
回答by
Your code is working (assuming your JS is located below those elements). You're just not setting any content in the element.
您的代码正在运行（假设您的 JS 位于这些元素下方）。您只是没有在元素中设置任何内容。
First, you should learn about the web developer tools in your browser. Hit "F12", and locate your "parent" div in the "elements" tab in the window that appears. Once you locate the "parent" element, click on your button. You'll see your new div appear under "parent".
首先，您应该了解浏览器中的 Web 开发人员工具。点击“F12”，然后在出现的窗口的“元素”选项卡中找到“父”div。找到“父”元素后，单击您的按钮。你会看到你的新 div 出现在“父”下。
However, it's not rendering anything because it has no content. Simply do
但是，它没有呈现任何内容，因为它没有内容。简单地做
newGroup.textContent = "Hello, world!";
After creating the element with document.createElement, and you'll now have content in your child.
使用 document.createElement 创建元素后，您现在将在您的孩子中拥有内容。
Also, don't set the id of each child to the same value. Id's in HTML are meant to be unique. You perhaps should also consider using addEventListenerinstead of onclick in your code.
另外，不要将每个孩子的 id 设置为相同的值。HTML 中的 ID 是唯一的。您也许还应该考虑在代码中使用addEventListener而不是 onclick 。
回答by Marco Chan
What are you trying to do? Are you trying to access the parent and newGroup outside of the function? If so, you need to declare the variables outside the function.
你想做什么？您是否尝试在函数之外访问 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);
};
You are just displaying an empty div so if you were wondering why you don't see anything, that is probably why. Try adding a simple string or CSS styling to see your new div. Here is an example: http://jsfiddle.net/inspiredtolive/Lrydh3ar/2/
您只是在显示一个空的 div，所以如果您想知道为什么什么都看不到，那可能就是原因。尝试添加一个简单的字符串或 CSS 样式来查看您的新 div。这是一个例子：http: //jsfiddle.net/inspiredtolive/Lrydh3ar/2/
