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-11-26 创建动态表格-斑马线
加油鸭



基本实现,但是却没有办法进行,底部边框的设置,不知道为什么,在浏览器的开发选项中也找到了相关的属性,但为什么没有显示出来呢?
<br>

<style>
td{width:200px;}
</style>
<div id="d"></div>
<script>
function addTd(info){

var td=document.createElement("td");

var info = document.createTextNode(info);
 
td.appendChild(info);

return td;}

function addTr(tx1,tx2,tx3,tx4){

var tr=document.createElement("tr");
var td1 = addTd(tx1);var td2 = addTd(tx2);var td3 =addTd(tx3);var td4 = addTd(tx4);

tr.appendChild(td1);tr.appendChild(td2);tr.appendChild(td3);tr.appendChild(td4);

return tr;}

           var table = document.createElement("table");
            table.appendChild(addTr("id", "名称", "血量", "伤害"));
            table.appendChild(addTr("1", "gareen", "340", "58"));
            table.appendChild(addTr("2", "teemo", "320", "76"));
            table.appendChild(addTr("3", "annie", "380", "38"));
            table.appendChild(addTr("4", "deadbrother", "400", "90"));

  var div1 = document.getElementById("d");
  div1.appendChild(table);
</script>

							


3 个答案

加油鸭 答案时间:2018-12-02
有border,只不过要在table属性里设置{border-collapse:collapse;},但还是谢谢老哥啦

伟大的时间主宰 答案时间:2018-12-01
tr是没有border的,td有

加油鸭 答案时间:2018-11-26
边框不折叠的表格(即border-collapse: collapse;) 行,列,行组和列组是不具有border的 默认table边框是折叠的
要在style中加入
table{border-collapse:collapse;}




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





2018-10-30 定义创建td、tr的方法
coolbgo



123
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			var body = document.getElementsByTagName("body")[0];
			var table = document.createElement("table");
			table.style.borderCollapse = "collapse";
			table.style.textAlign = "center";
			
			function newTd(s){
				var content = document.createTextNode(s);
				var td = document.createElement("td");
				td.appendChild(content);
				td.style.width = "200px";
				td.style.height = "30px";
				td.style.borderBottom = "solid 1px #aaa";
				return td;
			}
			function newTr(s1, s2, s3, s4){
				var tr = document.createElement("tr");
				tr.appendChild(newTd(s1));
				tr.appendChild(newTd(s2));
				tr.appendChild(newTd(s3));
				tr.appendChild(newTd(s4));
				return tr;
			}
			
			table.appendChild(newTr("id", "名称", "血量", "伤害"));
			table.appendChild(newTr("1", "gareen", "340", "58"));
			table.appendChild(newTr("2", "teemo", "320", "76"));
			table.appendChild(newTr("3", "annie", "380", "38"));
			table.appendChild(newTr("4", "deadbrother", "400", "90"));
			
			body.appendChild(table);
		</script>
	</body>
</html>

							






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





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

上传截图