JavaScript如何在div中动态生成<p>
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript如何在div中动态生成<p>相关的知识，希望对你有一定的参考价值。
我在div中动态显示一些段落文本 这些段落文本可能是100个也可能是1000个
这就需要我动态生成<P> 请问如何在div中动态生成<P>
还有 为什么我用.appendChild方法把<P>元素添加进div时 报错“类型不匹配”
1、获取div节点
var div = document.getElementById('divid');//获取一个id是divid的div节点，往这个节点中添加p节点2、动态生成p节点
var p = document.createElement('p');//创建p节点p.innerhtml = '显示的文字';//p节点显示的文字
3、往div中通过appendChild添加p节点
div.appendChild(p);//往div中添加p节点 参考技术A 可以直接用 document.getElementById("divid").innerHTML = "<p>内容</p>";的方式来写。多个可以循环进行处理
假设段落文本是个数组：array
可以通过
for (var i = 0; i < array.length;i++)
document.getElementById("divid").innerHTML = "<p>"+array[i]+"</p>";
的方式进行处理本回答被提问者采纳 参考技术B 如果段落过多,直接使用 div.appendChild方法会不段刷新DIV对象,影响运行速度, 正确的方法应该使用 document对象的碎片方法 document.createDocumentFragment 容器,最后再将这些碎片返回给DIV对象比较合理,例如:
var strArrayList=[]; // 创建一个段落文本数组对象,这些段落文本可能是100个也可能是1000个
strArrayList[0]='数据111.......';
strArrayList[1]='数据.......';
strArrayList[2]='数据.......';
strArrayList[3]='数据.......';
strArrayList[4]='数据.......';
//...数据n.....
var div=document.getElementById('div1'); //获得DIV对象
var f=document.createDocumentFragment(); //创建碎片对象
for(var i=0;i<strArrayList.length;i++)
var p=document.createElement('P'); //动态创建P标签
p.appendChild(document.createTextNode(strArrayList[i]));//段落字符串
f.appendChild(p); //附加到碎片对象中
div.appendChild(f);//最后返给DIV对象 参考技术C 我知道楼主是什么原因...
楼主应该这样做.....
var p=document.createElement("p");
然后再用appendChild方法把p 元素添加到 div
如果楼主还是解决不了这个问题的话...
请百度HI我!!帮你解决..... 参考技术D 楼主我是来拿分的... 标准的DOM生成节点、插入.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
pborder:1px solid #000; margin:4px auto; width:100px; text-align:center
</style>
</head>
<body>
<div id="outer"></div>
</body>
</html>
<script type="text/javascript">
function test()
var outer=document.getElementById("outer");
for(var i=0;i<5;i++)
var p=document.createElement("p");
var txt=document.createTextNode("第"+i+"个p");
p.appendChild(txt);
outer.appendChild(p);
test();
</script>
怎么使用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> 谢谢
然后就是直接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中动态生成<p>的主要内容，如果未能解决你的问题，请参考以下文章
从 HTML div 启动 JavaScript 函数，其中函数名称是动态生成的 ASP.NET