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节点
温馨提示：内容为网友见解，仅供参考
第1个回答 2009-04-07
可以直接用 document.getElementById("divid").innerHTML = "<p>内容</p>";的方式来写。
多个可以循环进行处理
假设段落文本是个数组：array
可以通过
for (var i = 0; i < array.length;i++) {
document.getElementById("divid").innerHTML = "<p>"+array[i]+"</p>";
}
的方式进行处理本回答被提问者采纳
多个可以循环进行处理
假设段落文本是个数组：array
可以通过
for (var i = 0; i < array.length;i++) {
document.getElementById("divid").innerHTML = "<p>"+array[i]+"</p>";
}
的方式进行处理本回答被提问者采纳
第2个回答 2009-04-07
如果段落过多,直接使用 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对象
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对象
第3个回答 2009-04-07
我知道楼主是什么原因...
楼主应该这样做.....
var p=document.createElement("p");
然后再用appendChild方法把p 元素添加到 div
如果楼主还是解决不了这个问题的话...
请百度HI我!!帮你解决.....
楼主应该这样做.....
var p=document.createElement("p");
然后再用appendChild方法把p 元素添加到 div
如果楼主还是解决不了这个问题的话...
请百度HI我!!帮你解决.....
第4个回答 2009-04-07
楼主我是来拿分的... 标准的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">
p{border: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>
<!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">
p{border: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>
相似回答
