使用特定的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]);

这段代码工作很好！但是生成的代码在页面顶部,正好在body标签之下.我的愿望是在具有id =“generate-here”的空格中生成该代码.

所以输出将是：

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

我知道我看不到使用“查看源”生成的内容.我只需要在#generate-here这个特定的地方生成那个内容.我是Javascript noob,所以如果有人可以重新安排这个完美的代码.非常感谢！

附：我知道如何使用Jquery来做这件事,但是在这种情况下我需要纯粹的纯Java.

解决方法

所有你需要做的是改变最后一行.这将添加创建的元素作为div的最后一个小孩：

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

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

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

您也可以使用innerHTML来替换新文本(如同在创建函数中所做的那样).显然,这不需要你保留创建函数,因为你需要一个HTML字符串而不是一个DOM对象.

var generateHere = document.getElementById("generate-here");
generateHere.innerHTML = '<div class="someclass"><a href="www.example.com"><p>some text</p></a></div>';