how2j.cn

关键字 简介 示例代码
createElement
创建元素节点
示例代码
createTextNode
创建文本节点
示例代码
createAttribute
创建属性节点
示例代码
练习-动态创建一个表
示例代码
答案-动态创建一个表
示例代码
示例 1 : 创建元素节点   
示例 2 : 创建文本节点   
示例 3 : 创建属性节点   
示例 4 : 练习-动态创建一个表   
示例 5 : 答案-动态创建一个表   

示例 1 :

创建元素节点

edit
通过createElement 创建一个新的元素节点
接着把该元素节点,通过appendChild加入到另一个元素节点div1中
运行效果
<html> <div id="d">Hello HTML DOM</div> <script> function add(){ var hr=document.createElement("hr"); var div1 = document.getElementById("d"); div1.appendChild(hr); } </script> <button onclick="add()">在div中追加一个hr元素</button> </html>
<html>
<div id="d">Hello HTML DOM</div>
<script>
function add(){
  var hr=document.createElement("hr");
  var div1 = document.getElementById("d");
  div1.appendChild(hr);
}
</script>

<button onclick="add()">在div中追加一个hr元素</button>

</html>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 2 :

创建文本节点

edit
首先创建一个元素节点p (p是p标签,不是随便命名的变量名)
接着通过createTextNode创建一个内容节点text
把text加入到p
再把p加入到div
运行效果
<html> <div id="d">Hello HTML DOM</div> <script> function add(){ var p=document.createElement("p"); var text = document.createTextNode("这是通过DOM创建出来的<p>"); p.appendChild(text); var div1 = document.getElementById("d"); div1.appendChild(p); } </script> <button onclick="add()">在div中追加一个p元素</button> </html>
<html>
<div id="d">Hello HTML DOM</div>
<script>
function add(){

  var p=document.createElement("p");
  var text = document.createTextNode("这是通过DOM创建出来的<p>");
  p.appendChild(text);

  var div1 = document.getElementById("d");
  div1.appendChild(p);

}
</script>
 
<button onclick="add()">在div中追加一个p元素</button>
 
</html>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 3 :

创建属性节点

edit
首先创建一个元素节点a
接着创建一个内容节点content
把content加入到a
然后通过createAttribute创建一个属性节点 href
设置href的值为http:12306.com
通过setAttributeNode把该属性设置到元素节点a上
最后把a加入到div
运行效果
<html> <div id="d">Hello HTML DOM<br></div> <script> function add(){ var a=document.createElement("a"); var content = document.createTextNode("http://12306.com"); a.appendChild(content); var href = document.createAttribute("href"); href.nodeValue="http://12306.com"; a.setAttributeNode(href); var div1 = document.getElementById("d"); div1.appendChild(a); } </script> <button onclick="add()">在div中追加一个超链</button> </html>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 4 :

练习-动态创建一个表

edit  姿势不对,事倍功半! 点击查看做练习的正确姿势
练习-表格斑马线中的表格,使用动态的方式创建出来
<style> table{ border-collapse:collapse; width:90%; } tr.odd{ background-color:#f8f8f8; } tr{ border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: lightgray; height:35px; } td{ width:25%; text-align:center; } </style> <div id ="d"> </div> <script> function createTD(text){ var td=document.createElement("td"); var text= document.createTextNode(text); td.appendChild(text); return td; } function createTR(texts){ var tr=document.createElement("tr"); for(var i=0;i<texts.length;i++){ var td = createTD(texts[i]); tr.appendChild(td); } return tr; } function createTable(rows){ var table=document.createElement("table"); for(var i=0;i<rows.length;i++){ var tr= createTR(rows[i]); table.appendChild(tr); } return table; } var row0= new Array("id","名称","血量","伤害"); var row1= new Array("1","gareen","340","58"); var row2= new Array("2","teemo","320","76"); var row3= new Array("3","annie","380","38"); var row4= new Array("4","deadbrother","400","90"); var rows=new Array(row0,row1,row2,row3,row4); var div = document.getElementById("d"); var table=createTable(rows); div.appendChild(table); </script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 5 :

答案-动态创建一个表

edit
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
查看本答案会花费4个积分,您目前总共有点积分。查看相同答案不会花费额外积分。 积分增加办法
查看本答案会花费4个积分,您目前总共有点积分。查看相同答案不会花费额外积分。 积分增加办法
账号未激活 账号未激活,功能受限。 请点击激活
运行效果
<style> table{ border-collapse:collapse; width:90%; } tr.odd{ background-color:#f8f8f8; } tr{ border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: lightgray; height:35px; } td{ width:25%; text-align:center; } </style> <div id ="d"> </div> <script> function createTD(text){ var td=document.createElement("td"); var text= document.createTextNode(text); td.appendChild(text); return td; } function createTR(texts){ var tr=document.createElement("tr"); for(var i=0;i<texts.length;i++){ var td = createTD(texts[i]); tr.appendChild(td); } return tr; } function createTable(rows){ var table=document.createElement("table"); for(var i=0;i<rows.length;i++){ var tr= createTR(rows[i]); table.appendChild(tr); } return table; } var row0= new Array("id","名称","血量","伤害"); var row1= new Array("1","gareen","340","58"); var row2= new Array("2","teemo","320","76"); var row3= new Array("3","annie","380","38"); var row4= new Array("4","deadbrother","400","90"); var rows=new Array(row0,row1,row2,row3,row4); var div = document.getElementById("d"); var table=createTable(rows); div.appendChild(table); </script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


HOW2J公众号,关注后实时获知最新的教程和优惠活动,谢谢。


问答区域    
2021-03-29 动态建表答案
镜子里的笑脸




用了一个二维数组,和二重for循环
加载中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格斑马线</title>
    <style>
        table{
            width:800px;
            text-align: center;
            margin: auto;
            border-collapse: collapse;
        }
        td{
            width:200px;
            border-bottom-style:solid;
            border-bottom-color: #f5f5f5;
            padding: 10px 0px;
        }
    </style>
</head>
<body>
<script>
    var t=new Array(5);
        t[0]=new Array("id","名称","血量","伤害"),
        t[1]=new Array("1","gareen","340","58"),
        t[2]=new Array("2","teemo","320","76"),
        t[3]=new Array("3","annie","380","38"),
        t[4]=new Array("4","deadbrother","400","90");
    var ta=document.createElement("table");
    document.body.appendChild(ta);
    var tr=new Array(),
        td=new Array(),i,j;
    for(i=0;i<5;i++)
    {
        tr[i]=document.createElement("tr");
        ta.appendChild(tr[i]);
        for(j=0;j<4;j++)
        {
            var text=document.createTextNode(t[i][j]);
            td[j]=document.createElement("td");
            tr[i].appendChild(td[j]);
            td[j].appendChild(text);
        }
    }
</script>
</body>
</html>

							


3 个答案

莫諾
答案时间:2024-03-16
111

CharlieLong
答案时间:2023-11-07
动态生成表格答案

重学java
答案时间:2022-01-11
站长提供的答案里面,提供了奇数行是浅灰色的样式,但却没有使用这个样式,在答案里面略作调整就可以支持。 另外, if(i%2 == 1){ var attr = document.createAttribute("class"); attr.nodeValue = "odd"; tr.setAttributeNode(attr); } attr必须是每个for循环都创建一个新的,不能放在循环外共用一个,也是测试出来的结果。浏览器提示,每个属性都需要克隆一份出来赋值,不能同一个attribute对象 赋值给多个 element对象。



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2020-12-28 动态创建表格 答案~
hhhzt




<!DOCTYPE > <html> <head> <script> function add_tr_head() { var table = document.getElementById('add'); //获取table节点 var tr_head = document.createElement('tr'); //创建tr节点 var tr_head_style = document.createAttribute('style'); //创建tr的style属性节点 //设置表格第一行(列名)的属性 tr_head_style.nodeValue = "border-bottom-style: solid;border-bottom-width: 2px;border-bottom-color: lightgray;height:35px;" tr_head.setAttributeNode(tr_head_style); var content = new Array('id','名称','血量','伤害') for(i in content){ var td_style = document.createAttribute('style') //创建td的属性 td_style.nodeValue = "width:25%;text-align:center;" var text = document.createTextNode(content[i]); //创建td的文本节点 var td = document.createElement('td'); //创建元素节点<td></td> td.setAttributeNode(td_style); //添加属性到td上 td.appendChild(text); //添加文本到td上 tr_head.appendChild(td); //添加td到tr上 } table.appendChild(tr_head); //添加tr到table上 } function add_tr() { var table = document.getElementById('add'); //获取table节点 document.write(test) var table_value = new Array(new Array(1,'gareen',340,58), new Array(2,'teemo',320,76), new Array(3,'annie',380,38), new Array(4,'deadbrother',400,90)) for(var i=0;i<4;i++){ //一共四行 var tr = document.createElement('tr'); //创建tr节点 var tr_style = document.createAttribute('style'); //创建tr的style属性节点 tr_style.nodeValue = "border-bottom-style: solid;\ border-bottom-width: 1px;\ border-bottom-color: lightgray;\ height:35px;" if (i%2 == 0) tr_style.nodeValue = tr_style.nodeValue + "background-color:#f8f8f8;"; tr.setAttributeNode(tr_style) for(var j=0;j<4;j++){ var td_style = document.createAttribute('style') //创建td的属性 td_style.nodeValue = "width:25%;text-align:center;" var text = document.createTextNode(table_value[i][j]); //创建td的文本节点 var td = document.createElement('td'); //创建元素节点<td></td> td.setAttributeNode(td_style); //添加属性到td上 td.appendChild(text); //添加文本到td上 tr.appendChild(td); } table.appendChild(tr); } } window.onload = function(){add_tr_head();add_tr();} </script> </head> <body> <table id = 'add' style="border-collapse:collapse;width:90%;"> </table> </body> </html>
加载中
<!DOCTYPE >
<html>
	<head>
		<script>
			function add_tr_head()
			{
				var table = document.getElementById('add');				//获取table节点
				var tr_head = document.createElement('tr');				//创建tr节点
				var tr_head_style = document.createAttribute('style');	//创建tr的style属性节点
				//设置表格第一行(列名)的属性
				tr_head_style.nodeValue = "border-bottom-style: solid;border-bottom-width: 2px;border-bottom-color: lightgray;height:35px;"
				tr_head.setAttributeNode(tr_head_style);
				
				var content = new Array('id','名称','血量','伤害')
				for(i in content){
					var td_style = document.createAttribute('style')	//创建td的属性
					td_style.nodeValue = "width:25%;text-align:center;"
					var text = document.createTextNode(content[i]);		//创建td的文本节点
					var td = document.createElement('td');				//创建元素节点<td></td>
					td.setAttributeNode(td_style);						//添加属性到td上
					td.appendChild(text);								//添加文本到td上
					tr_head.appendChild(td);							//添加td到tr上
				}
				table.appendChild(tr_head);								//添加tr到table上
			}
			function add_tr()
			{
				var table = document.getElementById('add');				//获取table节点
				document.write(test)
				var table_value = new Array(new Array(1,'gareen',340,58),	
											new Array(2,'teemo',320,76),
											new Array(3,'annie',380,38),
											new Array(4,'deadbrother',400,90))
				for(var i=0;i<4;i++){									//一共四行
					var tr = document.createElement('tr');				//创建tr节点
					var tr_style = document.createAttribute('style');	//创建tr的style属性节点
					tr_style.nodeValue = "border-bottom-style: solid;\
										border-bottom-width: 1px;\
										border-bottom-color: lightgray;\
										height:35px;"
					if (i%2 == 0)	tr_style.nodeValue = tr_style.nodeValue + "background-color:#f8f8f8;";
					tr.setAttributeNode(tr_style)
					for(var j=0;j<4;j++){
						var td_style = document.createAttribute('style')	//创建td的属性
						td_style.nodeValue = "width:25%;text-align:center;"
						var text = document.createTextNode(table_value[i][j]);			//创建td的文本节点
						var td = document.createElement('td');				//创建元素节点<td></td>
						td.setAttributeNode(td_style);						//添加属性到td上
						td.appendChild(text);								//添加文本到td上
						tr.appendChild(td);
					}
					table.appendChild(tr);
				}
			}
			window.onload = function(){add_tr_head();add_tr();}
		</script>
	</head>
	<body>
		<table id = 'add' style="border-collapse:collapse;width:90%;">
		</table>
	</body>

</html>

							


3 个答案

54Mozu
答案时间:2022-12-21
lishijing123456
答案时间:2022-09-04
多了document.write(test) 多了 \ tr_style.nodeValue = "border-bottom-style: solid;\ border-bottom-width: 1px;\ border-bottom-color: lightgray;\ height:35px;"

lishijing123456
答案时间:2022-09-04
好像不全啊?创建不出第二行以下的表格



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2020-11-08 更容易的方法创建文本节点
2020-10-12 第二题,动态建表,是不是不能建立一行一列的表格啊,感觉代码没有任何问题,拜托各位大佬了
2020-10-06 建表


提问太多,页面渲染太慢,为了加快渲染速度,本页最多只显示几条提问。还有 19 条以前的提问,请 点击查看

提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 前端部分-HTML DOM-创建节点 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 578362961
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图