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>

示例 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>

示例 3 :

创建属性节点

edit 顶折

纠问

首先创建一个元素节点a
接着创建一个内容节点content
把content加入到a
然后通过createAttribute创建一个属性节点 href
设置href的值为http:12306.com
通过setAttributeNode把该属性设置到元素节点a上
最后把a加入到div

运行效果

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

示例 4 :

练习-动态创建一个表

edit 顶折

纠问

姿势不对,事倍功半! 点击查看做练习的正确姿势

把练习-表格斑马线中的表格，使用动态的方式创建出来

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

示例 5 :

答案-动态创建一个表

edit 顶折

纠问

在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多

查看本答案会花费4个积分，您目前总共有点积分。查看相同答案不会花费额外积分。积分增加办法

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

运行效果

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

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

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

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

问答区域

2024-07-27 通过 dom对象动态创建 Table

虚心求学

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

使用dom对象动态创建表格。主要用到方法： 1.appendChild 追加子节点 2.createAttribute 创建属性节点 3.setAttributeNode 设置属性节点

<html>
    <head>
         <script>
 
    //dom 对象
    function dom(tagName){
        this.element = document.createElement(tagName);
        this.get = function(){
            return this.element;
        }
        this.set = function(element){
            this.element = element;
        }
        this.add = function(...ds){
            for(const d of ds)
            this.element.appendChild(d.element);
             
        }
        this.addnew = function(tagName){
            let child = document.createElement(tagName);
            this.element.appendChild(child);
        }
        this.append = function(child){
            this.element.appendChild(child);
        }
        this.setAttribute = function(att){
            this.element.setAttributeNode(att);
        }
        this.addAttribute = function(name,value){
            let att = document.createAttribute(name);
            att.nodeValue = value;
            this.setAttribute(att);
            return att;
        }
        this.setText = function(str){
            txt = document.createTextNode(str);
            this.element.appendChild(txt);
        }
        this.clear = function(){
            this.element.childNodes = null;
        }
    }
    function createTable(){
        //建立 body 的dom对象 
        var body = new dom();
        body.set(document.getElementsByTagName('body')[0]);
        body.addAttribute('style','width:50%');
 
        //建立 table 的 dom对象
        const table = new dom('table');
        //创建 table 的 style 属性
        table.addAttribute('style','width:100%;text-align:center;border-collapse:collapse;border-bottom:1px solid #bbb;');
        //添加标题行
        table.add(getRowTitle());
        //添加其余行
        addRows(table);
         
        //向 body 添加 table
        body.add(table);
        //向 body 添加 换行
        body.add(new dom('br'));
    }
    function setStyle(rows){
        for(const i in rows){
            let r = rows[i];
            if(i%2!=0)
            r.addAttribute('style','background-color:#eee');
        }
    }
    function addRows(sender){
        let rows = new Array();
        rows[0] = getRow('1','gareen','520','12');
        rows[1] = getRow('2','teemo','521','34');
        rows[2] = getRow('3','annie','013','56');
        rows[3] = getRow('4','deadbrother','014','78');
        setStyle(rows);
        for(let r of rows)
        sender.add(r);
    }
    function getRow(...cs){
        let row = new dom('tr');
        for(let c of cs){
            row.add(getCol(c,null));
            row.addAttribute('style','border-bottom:1px solid #bbb');
        }
        return row;
    }
    function getRowTitle()
    {
        let row = new dom('tr');
        row.addAttribute('style','border-bottom:1px solid #bbb;background-color:#fafafa');
        let cols = new Array(4);
        cols[0] = getCol('id','width:25%');
        cols[1] = getCol('名称','width:25%');
        cols[2] = getCol('血量','width:25%');
        cols[3] = getCol('伤害','width:25%');
        for(let col of cols){
            row.add(col);
        }
        return row;
    }
    function getCol(txt,css){
        let col = new dom('td');
        col.setText(txt);
        if(css!=null)
        col.addAttribute('style',css);
        return col;
    }
 
    function getButton(){
        let button = new dom('button');
        button.addAttribute('onclick','createTable()');
        button.setText('动态创建一个新表');
        var body = new dom();
        body.set(document.getElementsByTagName('body')[0]);
        body.add(button);
    }
         </script>
    </head>
 
    <body onload="createTable();getButton();">
    </body>
</html>

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

2021-03-29 动态建表答案

镜子里的笑脸

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

用了一个二维数组，和二重for循环

3 个答案

起个名
答案时间：2024-03-16

111

代码超过 5行，点击查看

<html>
    <style>
        table{
            width: 600px;
        }
        tr{
            text-align: center;
        }
        td{
             width: 200px;
        }
    </style>
    <button onclick="add()">创建表格模型</button>
    <div id="d"></br></div>   
    <script>
        function add(){
            var ts = new Array(5);
            ts[0]=new Array("id","名称","血量","伤害");
            ts[1]=new Array("1","gareen","340","58");
            ts[2]=new Array("2","teemo","320","76");
            ts[3]=new Array("3","annie","380","38");
            ts[4]=new Array("4","deadbrother","400","90");
            var table = document.createElement("table");
            var trs = new Array();
            var tds = new Array(); 
            for(var j = 0;j < 5; j++){
                trs[j]=document.createElement("tr");
                table.appendChild(trs[j]);
            }
            var j = 0;
            for(var i=0; i < 20; i++){   
                if(i!=0 && i%4==0)
                    j++;
                tds[i]=document.createElement("td");
                var text = document.createTextNode(ts[j][i%4]);
                tds[i].appendChild(text);
                trs[j].appendChild(tds[i]); 
            }
            var div1 = document.getElementById("d");
            div1.appendChild(table);
            var trs = document.getElementsByTagName("tr");
            for(var m = 0; m < trs.length; m++){
                if(m % 2 == 0 && m!= 0)
                    trs[m].style.backgroundColor = "#F0FFFF";
                else if(m % 2 != 0)
                    trs[m].style.backgroundColor = "#F0F8FF";
            }
        }
         
    </script>
     
</html>

CharlieLong
答案时间：2023-11-07

动态生成表格答案

代码超过 5行，点击查看

<!--动态生成表格-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生成表格</title>
</head>
<body>
<table id="Heroes" ></table>
<script>
    //初始化列和内容信息
    let heroesArrayCol=["id","名称","血量","伤害"];
    let heroesArrayVal=[[1,"garren","340","58"],
        [2,"teemo","320","76"],
        [3,"annie","380","38"],
        [4,"deadbrother","400","90"]];
    let tbHeroes=document.getElementById("Heroes");
    //表格首行信息
    let tbrowFirst=document.createElement("tr");
    tbrowFirst.id="firstRow";
    for(let i=0;i<heroesArrayCol.length;i++){
        let td=document.createElement("td");
        let tdText=document.createTextNode(heroesArrayCol[i]);
        td.appendChild(tdText);
        td.setAttribute("width","25%");
        tbrowFirst.appendChild(td);
    }
    tbHeroes.appendChild(tbrowFirst);
    //表格中添加数据行信息
    let tbrowVal=new Array(heroesArrayVal.length);
    for(let i=0;i<heroesArrayVal.length;i++){
        tbrowVal[i]=document.createElement("tr");
        tbHeroes.appendChild(tbrowVal[i]);
        for(let j=0;j<heroesArrayVal[i].length;j++){
            let td=document.createElement("td");
            let tdText=document.createTextNode(heroesArrayVal[i][j]);
            td.appendChild(tdText);
            tbrowVal[i].appendChild(td);
        }
        if(i%2===0){
            tbrowVal[i].className="oddRow"
        }else{
            tbrowVal[i].className="evenRow"
        }
    }
    //调整样式
    tbHeroes.style.width="60%";
    tbHeroes.style.borderCollapse="collapse"
    let firstRow=document.getElementById("firstRow");
    let oddRow=document.getElementsByClassName("oddRow");
    let evenRow=document.getElementsByClassName("evenRow");
    firstRow.style.backgroundColor="write";
    firstRow.style.borderBottomColor="4E4E4E";
    firstRow.style.borderBottomStyle="double";
 
    for(let i=0;i<oddRow.length;i++){
        oddRow[i].style.backgroundColor="rgb(248,248,248)";
        oddRow[i].style.borderBottomColor="#C0BEBE";
        oddRow[i].style.borderBottomStyle="solid";
    }
    for(let i=0;i<evenRow.length;i++){
        evenRow[i].style.backgroundColor="rgb(255,255,255)";
        evenRow[i].style.borderBottomColor="#C0BEBE";
        evenRow[i].style.borderBottomStyle="solid";
    }
</script>
</body>
</html>

重学java
答案时间：2022-01-11

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

代码超过 5行，点击查看

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

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

hhhzt

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

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

代码超过 5行，点击查看

<div id="d"></div>
    <style>
        table{
            width: 100%;
            border-collapse: collapse;
        }
        tr{
            width: 100%;
        }
        td{
            width: 25%;
            border-bottom: 1px lightgrey solid;
            text-align: center;
             
             
        }
    </style>
 
 
 
    <script>
 
        var div1 = document.getElementById("d");
        //创建元素节点
        var table=document.createElement("table");
        var tr1 = document.createElement("tr");
        var tr2 = document.createElement("tr");
        var tr3 = document.createElement("tr");
        var tr4 = document.createElement("tr");
        var tr1td1 = document.createElement("td");
        var tr1td2 = document.createElement("td");
        var tr1td3 = document.createElement("td");
        var tr1td4 = document.createElement("td");
        var tr2td1 = document.createElement("td");
        var tr2td2 = document.createElement("td");
        var tr2td3 = document.createElement("td");
        var tr2td4 = document.createElement("td");
        var tr3td1 = document.createElement("td");
        var tr3td2 = document.createElement("td");
        var tr3td3 = document.createElement("td");
        var tr3td4 = document.createElement("td");
        var tr4td1 = document.createElement("td");
        var tr4td2 = document.createElement("td");
        var tr4td3 = document.createElement("td");
        var tr4td4 = document.createElement("td");
        //创建属性节点id
        var t1 = document.createAttribute("id")
        var trid1 = document.createAttribute("id") 
        var trid2 = document.createAttribute("id") 
        var trid3 = document.createAttribute("id") 
        var trid4 = document.createAttribute("id") 
         
 
    function add(){
        //在div下添加table元素
        div1.appendChild(table);
        //给table添加属性节点id=t1
        t1.nodeValue="table1";
        table.setAttributeNode(t1);
        //在table下加tr元素
        var table1 = document.getElementById("table1");
        table1.appendChild(tr1);
        table1.appendChild(tr2);
        table1.appendChild(tr3);
        table1.appendChild(tr4);
        //给tr添加属性节点id=tr1,tr2,tr3,tr4    
        trid1.nodeValue="tr1";
        tr1.setAttributeNode(trid1);
        trid2.nodeValue="tr2";
        tr2.setAttributeNode(trid2);
        trid3.nodeValue="tr3";
        tr3.setAttributeNode(trid3);
        trid4.nodeValue="tr4";
        tr4.setAttributeNode(trid4);
        //在tr1下添加td元素
        var trr1 = document.getElementById("tr1");
        trr1.appendChild(tr1td1)
        trr1.appendChild(tr1td2)
        trr1.appendChild(tr1td3)
        trr1.appendChild(tr1td4)
        //给td添加内容
        var text = document.createTextNode("尺寸1");
        tr1td1.appendChild(text); 
        //给td添加内容
        var text = document.createTextNode("尺寸2");
        tr1td2.appendChild(text); 
        //给td添加内容
        var text = document.createTextNode("尺寸3");
        tr1td3.appendChild(text); 
        //给td添加内容
        var text = document.createTextNode("尺寸4");
        tr1td4.appendChild(text);    
        //在tr2下添加td元素
        var trr2 = document.getElementById("tr2");
        trr2.appendChild(tr2td1)
        trr2.appendChild(tr2td2)
        trr2.appendChild(tr2td3)
        trr2.appendChild(tr2td4)
        //给td添加内容
        var text = document.createTextNode("尺寸21");
        tr2td1.appendChild(text); 
        //给td添加内容
        var text = document.createTextNode("尺寸22");
        tr2td2.appendChild(text); 
        //给td添加内容
        var text = document.createTextNode("尺寸23");
        tr2td3.appendChild(text); 
        //给td添加内容
        var text = document.createTextNode("尺寸24");
        tr2td4.appendChild(text);     
        //在tr3下添加td元素
        var trr3 = document.getElementById("tr3");
        trr3.appendChild(tr3td1)
        trr3.appendChild(tr3td2)
        trr3.appendChild(tr3td3)
        trr3.appendChild(tr3td4)
        //给td添加内容
        var text = document.createTextNode("尺寸31");
        tr3td1.appendChild(text); 
        //给td添加内容
        var text = document.createTextNode("尺寸32");
        tr3td2.appendChild(text); 
        //给td添加内容
        var text = document.createTextNode("尺寸33");
        tr3td3.appendChild(text); 
        //给td添加内容
        var text = document.createTextNode("尺寸34");
        tr3td4.appendChild(text);    
        //在tr4下添加td元素
        var trr4 = document.getElementById("tr4");
        trr4.appendChild(tr4td1)
        trr4.appendChild(tr4td2)
        trr4.appendChild(tr4td3)
        trr4.appendChild(tr4td4)
        //给td添加内容
        var text = document.createTextNode("尺寸41");
        tr4td1.appendChild(text); 
        //给td添加内容
        var text = document.createTextNode("尺寸42");
        tr4td2.appendChild(text); 
        //给td添加内容
        var text = document.createTextNode("尺寸43");
        tr4td3.appendChild(text); 
        //给td添加内容
        var text = document.createTextNode("尺寸44");
        tr4td4.appendChild(text);    
    }
     
 
 
 
 
    </script>
    <button onclick="add()">在div中追加一个超链</button>

lishijing123456
答案时间：2022-09-04

多了document.write(test) 多了 \ tr_style.nodeValue = "border-bottom-style: solid;\ border-bottom-width: 1px;\ border-bottom-color: lightgray;\ height:35px;"

代码超过 5行，点击查看

<head>
    <meta charset="UTF-8">
    <title> 动态建表</title>
    <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:45px;"
                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节点
 
                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>

lishijing123456
答案时间：2022-09-04

好像不全啊？创建不出第二行以下的表格

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

2020-11-08 更容易的方法创建文本节点

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

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

提问之前请登陆

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