在具有特定ID的DIV中使用JavaScript动态添加HTML元素

好的，各位，我需要你们的帮助。我在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]);

我知道我不能用“查看源”查看生成的内容。我只需要使用

#generate here

在这个特定位置生成内容。我是JavaScriptNoob，所以如果有人能重新安排这段代码，那将是完美的。非常感谢

---

另外，我知道如何使用Jquery实现这一点，但在这种情况下，我需要本机和纯JavaScript。

您需要做的就是更改最后一行。这将添加创建的元素作为div的最后一个子元素：

document.getElementById("generate-here").appendChild(fragment);     

var generateHere = document.getElementById("generate-here");
generateHere.insertBefore(fragment, generateHere.firstChild);

这将添加创建的元素作为div的第一个子元素：

document.getElementById("generate-here").appendChild(fragment);     

var generateHere = document.getElementById("generate-here");
generateHere.insertBefore(fragment, generateHere.firstChild);

您还可以使用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>';

var generateHere=document.getElementById（“generate here”）；
generateHere.innerHTML=''；

第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;
}

---

您可以使用firebug:谢谢，我不知道：）查看页面上的实际html，但更重要的是在特定位置生成代码。我不知道为什么，但#generate here仍然是空的。我已经尝试了这两种代码，但都不起作用：/@MiljanPuzović您是否保持了所有其他代码不变，只是更改了最后一行？我编辑以澄清。：）是的，我刚刚更改了最后一行：），但这不起作用。我现在将尝试使用innerHTML。有趣的是，在这个示例中，它们都适用于我。只要把你想试试的评论出来；我列出了所有三个。我甚至看不出这个例子是有效的：/看图片，我正在使用Chrome，可能是Chrome中的一些bug。。。。不，我在Firefox上也看到了同样的问题。