javascript 如何使用javascript的addChild方法给我的div添加一个节点？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6142806/
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
How to use the addChild method of javascript to add a node to my div?
提问by James
Hello I have a div as follows
你好，我有一个 div 如下
<div id="test" class="test2">
<p> <a href=""> <a> </p>
<p> <a href=""> <a> </p>
<p> <a href=""> <a> </p>
<p> <a href=""> <a> </p>
</div>
(I have stripped out the data but that is the structure)
（我已经剥离了数据，但这就是结构）
How does one use the addChild function of javascript to add a new node
如何使用javascript的addChild函数添加新节点
<p> <a href=""> <a> </p>
I know how to use the removeChild function but I haven't been able to find documentation and examples using the addChild function.
我知道如何使用 removeChild 函数，但我一直无法找到使用 addChild 函数的文档和示例。
If I have the node string in a php array, and can execute the php script containing the array with a GET call via a button click how can I use the addChild function to put the node string into the div?
如果我在 php 数组中有节点字符串，并且可以通过单击按钮通过 GET 调用执行包含该数组的 php 脚本，我该如何使用 addChild 函数将节点字符串放入 div 中？
回答by The Scrum Meister
addChildis a php function, The javascript function is called appendChild:
addChild是一个php函数，调用javascript函数appendChild：
var dv = document.createElement("p");
dv.innerHTML = "<a href=""> </a> ";
document.getElementById('test').appendChild(dv)
Alternativly, you can append the node string to the html:
document.getElementById('test').innerHTML += '<p> <a href=""> <a> </p>
'
或者，您可以将节点字符串附加到 html：
document.getElementById('test').innerHTML += '<p> <a href=""> <a> </p>
'
回答by Lepidosteus
Since what you have is a string, you first need to create a DOM representation of it (you can't pass a string to appendChild, only a dom element). To do that the easiest way is to put it inside another element and then take its content.
由于您拥有的是一个字符串，您首先需要创建它的 DOM 表示（您不能将字符串传递给 appendChild，只能传递一个 dom 元素）。要做到这一点，最简单的方法是将其放入另一个元素中，然后获取其内容。
var temp = document.createElement('div'); // create a temporary dom element
temp.innerHTML = '<p><a href="#">some cool html string</a></p>'; // give it your html string as content, the browser will then create the corresponding dom representation
var childs = temp.childNodes; // grab the resulting child elements
document.getElementById('where_to_append').appendChild(childs); // append them to where you want
Or you could simply set it without appendChild by using innerHTML anyway:
或者你可以简单地通过使用innerHTML来设置它而不使用appendChild：
var my_div = document.getElementById('where_to_append');
my_div.innerHTML = my_div.innerHTML + '<p><a href="#">some cool html string</a></p>';
回答by Shimaa Marzouk
You can use the append()method to do that. Here is an example where I defined the new_childand added to the parent-div
您可以使用该append()方法来做到这一点。这是我定义new_child并添加到的示例parent-div
var new_child = jQuery(document.createElement('p')).html("<p> <a href=""> <a></p>");
$('parent-div').append(new_child);
回答by Matty K
W3Schools has examples for adding a nodeusing appendChild()
W3Schools 有使用appendChild()添加节点的示例
