好的,我需要你的帮助.我在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>';
