在具有特定 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 菜鸟，所以如果有人可以重新排列这段代码，那将是完美的。非常感谢！

PS 我知道如何使用 Jquery 执行此操作，但在这种情况下我需要原生和纯 JavaScript。

原文由 Miljan Puzović 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>';

原文由 Gordon Gustafson 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是我的解决方案示例

function divHTML(img, d1, r1, r2){
    const newDiv = document.createElement("div");
    const newContent = `
    <img src="`+img+`" width=50%>
    <h1 style="color:white">`+d1+`</h1>
    <button onclick="dom1.value='A'">A</button><i>`+r1+`</i><br>
    <button onclick="dom1.value='B'">B</button><i>`+r2+`</i><br>
    <input id="dom1" type="text"><hr>
    `;
    newDiv.innerHTML = newContent;
    const currentDiv = document.getElementById("div1");
    document.body.insertBefore(newDiv, currentDiv);
}

divHTML("https://images-cdn.kahoot.it/decf7162-f24b-464b-b2e7-2cca47ae0b42?auto=webp", "qual è la scrittura giusta?", "opzione 1", "opzione 2"
    );

原文由 PythonProgrammi 发布，翻译遵循 CC BY-SA 4.0 许可协议