javascript - 使用 JavaScript 在具有特定 ID 的 DIV 内动态添加 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 菜鸟，所以如果有人可以重新排列这段代码，那就完美了。非常感谢!

附注我知道如何使用 Jquery 来做到这一点，但在这种情况下我需要 native 和纯 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>';