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

前端之家收集整理的这篇文章主要介绍了使用特定的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>';
原文链接:https://www.f2er.com/css/217178.html

猜你在找的CSS相关文章