如何动态地使用带有特定ID的DIV内的JavaScript添加HTML元素?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (491)

我在网上找到了一些代码,它们通过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...。我是JavascriptNoob,所以如果有人能重新排列这段代码,那就太完美了。非常感谢!

我知道如何使用jQuery实现这一点,但在本例中我需要原生和纯JavaScript。

提问于
用户回答回答于

你所需要做的就是改变最后一行。这会将创建的元素添加为div 的最后一个子元素:

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>';
用户回答回答于

第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中显示我们的listview:

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

扫码关注云+社区

领取腾讯云代金券