22

好的，人们，我需要你的帮助。我在 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。

4

3 回答 3

23

您需要做的就是更改最后一行。这会将创建的元素添加为 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>';
于 2012-08-04T01:51:01.613 回答
0

第 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));
于 2017-08-10T05:41:17.203 回答
0

这是我的解决方案示例

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"
    );
于 2021-12-05T19:52:39.193 回答