在具有特定 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標簽的正下方。 我想在具有特定id="generate-here"空div生成該代碼。

所以輸出將是：

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

我知道我無法通過“查看源代碼”查看生成的內容。 我只需要在這個特定的地方使用#generate-here生成該內容。 我是 Javascript noob，所以如果有人可以重新排列這段代碼，那就完美了。 非常感謝！

PS 我知道如何用 Jquery 做到這一點，但在這種情況下我需要原生和純 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>';

Answer 2

步驟1.讓我們創建一個函數來返回一個有序的HTML列表視圖。 注意我們傳入一組數據：

function createListView(spacecrafts){
    var listView=document.createElement('ol');
    for(var i=0;i<spacecrafts.length;i++)
    {
        var listViewItem=document.createElement('li');
        listViewItem.appendChild(document.createTextNode(spacecrafts[i]));
        listView.appendChild(listViewItem);
    }
    return listView;
}

第2步。然后讓我們在你的div中顯示我們的列表視圖：

document.getElementById("displaySectionID").appendChild(createListView(myArr));

Answer 3

這是我的解決方案示例

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"
    );