Question

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

这段代码工作很好！但生成的代码位于页面顶部，位于body标记下方。我希望在具有特定div的空id="generate-here"内生成该代码。

因此输出将是：

<div id="generate-here">
    <!-- Here is generated content -->
</div>

我知道我无法通过“查看源”看到生成的内容。我只需要在#generate-here的特定位置生成该内容。我是Javascript noob，所以如果有人可以重新排列这个完美的代码。非常感谢！

P.S。我知道如何使用Jquery，但在这种情况下我需要本机和纯JavaScript。

Answer 1

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

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

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

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>';

Answer 2

步骤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;
}

步骤2.然后让我们在您的div中显示我们的列表视图：

document.getElementById("displaySectionID").appendChild(createListView(myArr));

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

2 个答案: