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

答案-动态创建一个表

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公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2019-04-27 示例4作业
歪脖树下自逍遥



交作业
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
    	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <title>使用js动态生成表格</title>
    </head>
    <body>
        <script type="text/javascript">
			var body_=document.getElementsByTagName("body").item(0);
			var contents=[["id","名称","血量","伤害"],["1","gareen","340","58"],["2","teemo","320","76"],["3","annie","380","38"],["4","deadbrother","400","90"]];
			
			
			for(var i=0;i<contents.length;i++){
				var tr_=document.createElement("tr");//tr标签
				for(var j=0;j<contents[i].length;j++){
					var td_=document.createElement("td");//td标签
					var content_=contents[i][j];//获取数据用于生成到td里
					td_.appendChild(document.createTextNode(content_));	
					tr_.appendChild(td_);
				}
				body_.appendChild(tr_);
			}
			
		</script>
    </body>
</html>

							





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





2019-04-22 大家注意在for循环的时候一定要填var i
genglong
如果在for循环中没有写成var i,那么这个i是全局变量,会出错, 出处:https://codeday.me/bug/20190325/825270.html




1 个答案

AlphaGo 答案时间:2019-05-15
赞你哟



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




2019-04-16 交作业
2019-04-09 交作业
2019-03-30 哎呀表格出不来啊,有好心人帮我看一眼么
2019-03-12 交作业
2019-03-09 发现一个问题,如果将for循环中的i的声明var去掉就只会显示第一行
2019-02-20 作业
2019-01-18 如果是用getElementsByTagName 注意得到的不是元素而是元素数组 需要tables[i]
2018-11-26 创建动态表格-斑马线
2018-10-30 定义创建td、tr的方法
2018-07-04 交作业,只用了一个方法写XD,大家看看怎么样
2018-03-22 作业
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群交流: 1001964108
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: http://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图