使用JavaScript动态添加具有特定ID的DIV元素
使用JavaScript动态添加具有特定ID的DIV元素
提问于 2012-08-04 09:41:12
好了各位我需要你们的帮助。我在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>我知道我不能用"view source“来查看生成的内容。我只需要用#generate-here在这个特定的地方生成内容。我是Javascript菜鸟，所以如果有人能重新整理这段代码，那就太好了。非常感谢!
附注:我知道如何使用Jquery来做到这一点，但在这种情况下，我需要原生的纯JavaScript。
回答 2
Stack Overflow用户
发布于 2017-08-10 13:41:17
步骤1.让我们创建一个函数来返回一个有序的HTML listview。注意，我们传入的是一个数据数组：
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中显示我们的listview：
document.getElementById("displaySectionID").appendChild(createListView(myArr));Stack Overflow用户
发布于 2021-12-05 19:52:39
这是我的解决方案示例
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"
);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11805251
复制相关文章
相似问题