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

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,所以如果有人可以重新排列这个完美的代码.非常感谢!

PS我知道如何用Jquery做这个,但在这种情况下我需要原生和纯JavaScript.

Answer 1

您需要做的就是更改最后一行.这会将创建的元素添加为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>';