HTML DOM系列教材（七）- 创建节点

工具版本兼容问题

关键字	简介	示例代码
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>

源代码

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>

源代码

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个积分，您目前总共有点积分。查看相同答案不会花费额外积分。积分增加办法

账号未激活账号未激活，功能受限。请点击激活

运行效果

代码行数较多，请点击查看

<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 全屏编辑，再次点击恢复

</div>

</script>

渲染中渲染完成

效果

HTML DOM系列教材（六）- 节点关系

HTML DOM系列教材（八）- 删除节点

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

问答区域

2020-10-12 第二题，动态建表，是不是不能建立一行一列的表格啊，感觉代码没有任何问题，拜托各位大佬了

叫么么哒的兔子猪

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

<div id="box"></div> <script> var table=document.createElement("table"); var box=document.getElementsById("box"); var tr=document.createElement("tr"); table.appendChild(tr); var td=document.createElement("td"); td.appendChild(document.createTextNode("1")); table.appendChild(td); box.appendChild(table); </script>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2020-10-06 建表

小白白白白白白白白白白白白白白白白

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

建表

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
span{ margin-left:10px;margin-right:10px; display:inline-block; width:100px; text-align:center}
div{ float:left;}
</style>
</head>
<body>
<div id="box">

</div>
</body>
<script>
var test = [
        ["id","名称","血量","伤害"],
        ["1", "gareen", "340","58"],
        ["2","teemo", "320","76"],
        ["3","annie", "380", "38"],
        ["4","deadbrother","400","90"]
    ];
	var box = document.getElementById("box");
for(var i=0;i<test.length; i++){
	for(var j=0;j<test[i].length; j++){
		var a= document.createElement("span");
		var text=document.createTextNode(test[i][j]);
		a.appendChild(text);
		box.appendChild(a);		
		if(j==3){
			var d=document.createElement("hr");
			box.appendChild(d);
		}
		}
		
}
</script>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2020-08-27 这三个函数没有被调用啊

2020-05-20 全动态表格

小原

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

样式提前定制好

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            width: 900px;
            margin: 0 auto;
            /*边框合并*/
            border-collapse: collapse;
        }
        td{
            width: 225px;
            height: 40px;
            text-align: center;
            vertical-align:middle;
            border-bottom: 1px solid rgb(211,211,211);
        }
    </style>
</head>
<body>
<div id="box"></div>
<script>
    var arr = new Array(5);
    var test = [
        ["id","名称","血量","伤害"],
        ["1", "gareen", "340","58"],
        ["2","teemo", "320","76"],
        ["3","annie", "380", "38"],
        ["4","deadbrother","400","90"]
    ];
    var tb = document.createElement("table");
    var box = document.getElementById("box");
    for (var i = 0;i < arr.length; i++){
        arr[i]=new Array(4);
        arr[i][0] = document.createElement("tr");
        tb.appendChild(arr[i][0]);
        for (var j =0; j<arr[i].length;j++){
            arr[i][j] = document.createElement("td");
            arr[i][j].appendChild(document.createTextNode(test[i][j]));
            tb.appendChild(arr[i][j]);
        }
    }
    box.appendChild(tb);
</script>
</body>
</html>

2 个答案

第三颗松果
答案时间：2020-09-12

代码超过 5行，点击查看

gugubird
答案时间：2020-06-05

代码超过 5行，点击查看

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2020-05-03 创建表格代码，可以的话希望大家指正

福工刘德华

关于前端部分-HTML DOM-创建节点 -答案-动态创建一个表的提问

分别使用两个函数一个生成行，另一个将行放到表格中，再将表格放到div中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="div1"></div>
    <input type="button" value="生成表" onclick="createtable()">
</body>
<script>
    function createtable() {
        var table = document.createElement("table");
        table.style.borderColor="black";
        table.style.borderStyle="solid";
        table.style.borderWidth="1px";
        var div = document.getElementById("div1").appendChild(table);
        var th = Createrow("id", "name", "hp", "damage");
        var tr1 = Createrow("1", "gareen", "340", "58");
        var tr2 = Createrow("2", "teemo", "320", "76");
        var tr3 = Createrow("3", "annie", "380", "38");
        var tr4 = Createrow("4", "deadbrother", "400", "90");
        table.appendChild(th);
        table.appendChild(tr1);
        table.appendChild(tr2);
        table.appendChild(tr3);
        table.appendChild(tr4);
    }
    function Createrow(id, name, hp, damage) {
        var array = [id, name, hp, damage];
        var tr = document.createElement("tr");
        for (let index = 0; index < array.length; index++) {
            var data = document.createTextNode(array[index]);
            var td = document.createElement("td");
            td.appendChild(data);
            tr.appendChild(td);
            td.style.borderColor="black";
            td.style.borderStyle="solid";
            td.style.borderWidth="1px";

        }
        return tr;
    }
</script>

</html>

1 个答案

朱镇子
答案时间：2020-05-04

感觉可以把表示层的东西放到css里面，这样方便后面的维护调整。

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

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

提问之前请登陆

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

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

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 635924385

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

上传截图