how2j.cn

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

示例 1 :

创建元素节点

通过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 :

创建文本节点

首先创建一个元素节点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 :

创建属性节点

首先创建一个元素节点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 :

练习-动态创建一个表

Or  姿势不对,事倍功半! 点击查看做练习的正确姿势
练习-表格斑马线中的表格,使用动态的方式创建出来
<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 :

答案-动态创建一个表

在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
运行效果
<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公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2018-07-04 交作业,只用了一个方法写XD,大家看看怎么样
IceBearScript



只用了一个方法写XD,大家看看怎么样
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>节点创建练习</title>
		<style>
			table{
				border-collapse: collapse;
				width: 66%;
			}
			tr{
			border-bottom-style: solid;
			border-bottom-width: 1px;
			border-bottom-color: lightgray;
			height:35px;
			}
			td{
			width:25%;
			text-align:center;
			}
		</style>
		<script>
			//初始化录入数据
			 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);
			 //构造建表函数
			function createSheet(array){
				var table = document.createElement("table");
				for(var i=0;i<array.length;i++){
					var tr = document.createElement("tr");
					for(var j=0;j<array[0].length;j++){
						var td = document.createElement("td");
						var txt = document.createTextNode(array[i][j]);
						td.appendChild(txt);
						tr.appendChild(td);
					}
					table.appendChild(tr);
				}
				document.getElementById("content").appendChild(table);
			}
		</script>
	</head>
	<body>
		<div id="content"></div>
		<button onclick="createSheet(rows)">添加表</button>
	</body>
</html>

							


1 个答案

JGD 答案时间:2018-07-30
66666




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2018-03-22 作业
qjhhd305



做了4个text,可以自己添加想要的东西。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body>
<style>
table
{
	font-size:16px;
	text-align:center;
	margin:auto;
	border-collapse:collapse;	
}
td
{
	width:200px;
	height:30px;
	border-bottom-style:solid;
	border-bottom-color:#99C;
	border-bottom-width:1px;	
}
.biaotilan
{
	font-family:黑体;	
}

</style>

<script>
function add(){
	var input1 = document.getElementById("input1").value;
	var input2 = document.getElementById("input2").value;
	var input3 = document.getElementById("input3").value;
	var input4 = document.getElementById("input4").value;
	
	if(input1.length==0||input2.length==0||input3.length==0||input4.length==0)
	{
		alert("数据不能为空");
		return;	
	}
	
	var td1 = document.createElement("td");
	var td2 = document.createElement("td");
	var td3 = document.createElement("td");
	var td4 = document.createElement("td");
	
	var text1 = document.createTextNode(input1);
	var text2 = document.createTextNode(input2);
	var text3 = document.createTextNode(input3);
	var text4 = document.createTextNode(input4);
	
	td1.appendChild(text1);
	td2.appendChild(text2);
	td3.appendChild(text3);
	td4.appendChild(text4);
	
	var tr = document.createElement("tr");
	tr.appendChild(td1);
	tr.appendChild(td2);
	tr.appendChild(td3);
	tr.appendChild(td4);
	
	var table = document.getElementById("table1");
	table.appendChild(tr);

	
}
</script>

id  :<input id="input1" type="text" width="30px"><br/>
名称:<input id="input2" type="text" width="30px"><br/>
血量:<input id="input3" type="text" width="30px"><br/>
伤害:<input id="input4" type="text" width="30px"><br/>
<button onclick="add()">添加</button>
<br/>
<br/>

<table id="table1">
	<tr>
    	<td class="biaotilan">id</td>
        <td class="biaotilan">名称</td>
        <td class="biaotilan">血量</td>
        <td class="biaotilan">伤害</td>
    </tr>
</table>

</body>
</html>

							






答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2017-09-13 使用tr.odd设置背景颜色没用,
2017-09-13 tr.odd没用
2017-07-16 完成
2017-07-07 关于create 问题,都必须使用document 对象吗,我直接比如在a标签下 ,先获取a 节点,然后直接 a.createAttribute("href"); 怎么不可以啊
2016-11-12 用DOM创建表格不成功




提问之前请登陆
关于 前端部分-HTML DOM-创建节点 的提问

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

上传截图