在具有特定 ID 的 DIV 中使用 JavaScript 动态添加 HTML 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11805251/
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
Add HTML elements dynamically with JavaScript inside DIV with specific ID
提问by Miljan Puzovi?
Ok, people, I need your help. I've found some code here on Stackoverflow (can't find that link) which generate HTML code dynamically via JS. Here is code:
好的，人们，我需要你的帮助。我在 Stackoverflow 上找到了一些代码（找不到那个链接），它们通过 JS 动态生成 HTML 代码。这是代码：
function create(htmlStr) {
var frag = document.createDocumentFragment(),
temp = document.createElement('div');
temp.innerHTML = htmlStr;
while (temp.firstChild) {
frag.appendChild(temp.firstChild);
}
return frag;
}
var fragment = create('<div class="someclass"><a href="www.example.com"><p>some text</p></a></div>');
document.body.insertBefore(fragment, document.body.childNodes[0]);
This code works just fine! But the generated code appears on top of page, right below bodytag. I would like to generate that code inside empty divwith specific id="generate-here".
这段代码工作得很好！但是生成的代码出现在页面顶部，body标签正下方。我想div用特定的id="generate-here".
So output will be:
所以输出将是：
<div id="generate-here">
<!-- Here is generated content -->
</div>
I know that I can't see generated content with "view source". I only need to generate that content just in this particular place with #generate-here. I'm Javascript noob, so if anyone can just rearrange this code that will be perfect. Thanks a lot!
我知道我无法通过“查看源代码”查看生成的内容。我只需要在这个特定的地方用#generate-here. 我是 Javascript noob，所以如果有人可以重新排列这段代码，那就完美了。非常感谢！
P.S. I know how to do this with Jquery, but I need native and pure JavaScript in this case.
PS 我知道如何用 Jquery 做到这一点，但在这种情况下我需要原生和纯 JavaScript。
采纳答案by Gordon Gustafson
All you need to do is change the last line. This will add the created element as the lastchild of the div:
您需要做的就是更改最后一行。这会将创建的元素添加为div的最后一个子元素：
document.getElementById("generate-here").appendChild(fragment);
This will add the created element as the firstchild of the div:
这会将创建的元素添加为div的第一个子元素：
var generateHere = document.getElementById("generate-here");
generateHere.insertBefore(fragment, generateHere.firstChild);
You can also use innerHTML to just replace everything with new text (as you do in your createfunction). Obviously this one doesn't require you to keep the createfunction because you need an html string instead of a DOM object.
您还可以使用 innerHTML 将所有内容替换为新文本（就像您在create函数中所做的那样）。显然，这个不需要你保留这个create函数，因为你需要一个 html 字符串而不是一个 DOM 对象。
var generateHere = document.getElementById("generate-here");
generateHere.innerHTML = '<div class="someclass"><a href="www.example.com"><p>some text</p></a></div>';
回答by Oclemy
Step 1. Let's create a function to return us an ordered HTML listview. Note we are passing in an array of data:
第 1 步。让我们创建一个函数来返回一个有序的 HTML 列表视图。请注意，我们传入的是一个数据数组：
function createListView(spacecrafts){
var listView=document.createElement('ol');
for(var i=0;i<spacecrafts.length;i++)
{
var listViewItem=document.createElement('li');
listViewItem.appendChild(document.createTextNode(spacecrafts[i]));
listView.appendChild(listViewItem);
}
return listView;
}
Step 2. Then let's display our listview in your div:
第 2 步。然后让我们在您的 div 中显示我们的列表视图：
document.getElementById("displaySectionID").appendChild(createListView(myArr));
