怎么使用javascript动态生成嵌套的div

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了怎么使用javascript动态生成嵌套的div相关的知识,希望对你有一定的参考价值。

想实现这个样子
<div class="grid_3">
<div style="border:#e5eaff 1px solid;height:40px">
<div>数据</div>
</div>
</div>
<div class="grid_9">
<div style="border:#e5eaff 1px solid;height:40px">
<div>数据</div>
</div>
</div>
页面里有<span id="repostdiv"></span>标记

想实现---通过链接跳到页面时能够动态加载出div列表
想用javascript写的,代码如下,执行不了
var creatediv3=document.createElement("div");
creatediv3.setAttribute("class","grid_3");

var namediv=document.createElement("div");
namediv.style.border="#e5eaff 1px solid";
namediv.style.height="40px";

var creatediv9=document.createElement("div");
creatediv9.setAttribute("class","grid_9");

var contentdiv=document.createElement("div");
contentdiv.style.border="#e5eaff 1px solid";
contentdiv.style.height="40px";

window.onload=function()
var rediv=document.getElementById("repostdiv");
rediv.appendChild(creatediv3);
rediv.appendChild(creatediv9);
var creatediv3=document.getElementById("creatediv3");
creatediv3.appendChild(namediv);
var creatediv9=document.getElementById("creatediv9");
creatediv9.appendChild(contentdiv);


或者用innerhtml
会添加一个div但是添加的div里面在嵌套一个怎么加?
求大神帮助 或者其他方法请说明 本人新手望详解
再问下怎么在添加的div里加东西 比如加<img>或<a> 谢谢

参考技术A span是行内元素,DIV是块级元素,你这么的是加不进去的。<div id="repostdiv"></div>根元素改成这样

然后就是直接innerHTML进去就行。

var html = [];
html.push('<div class="grid_3">');
html.push('<div style="border:#e5eaff 1px solid;height:40px">');
html.push('<div>数据</div>');
html.push('</div></div>');
html.push('<div class="grid_9"><div style="border:#e5eaff 1px solid;height:40px"><div>数据</div></div></div>'');

document.getElementById('repostdiv').innerHTML = html.join('');

这样就能插进去了。插任何元素都可以这样插的本回答被提问者采纳

以上是关于怎么使用javascript动态生成嵌套的div的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript如何在div中动态生成<p>

Angular CDK - 在嵌套的可滚​​动 div 内滚动和拖动元素的问题

如何为所有动态生成的 div 添加常用的 Javascript 函数? [复制]

为啥我用JS动态生成的DIV模块,里面的点击方法不生效?

从 HTML div 启动 JavaScript 函数,其中函数名称是动态生成的 ASP.NET

利用js动态生成一个简单的商品详情页