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


问答区域    
2017-09-13 使用tr.odd设置背景颜色没用,
junxiaoge



使用 tr:nth-child(odd) 就可以,但是第二种方法设置的表格行背景颜色不是奇数行,轻点骂。。。。。。
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<style>
        table{
            border-collapse:collapse;
            width:90%;
        }
        tr:nth-child(odd) {background-color:red}
       
        tr{
            border-bottom-style: solid;
            border-bottom-width: 1px;
            border-bottom-color: lightgray;
            height:35px;
        }

        td{
            width:25%;
            text-align:center;
        }

   </style>


<body>

<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>
  
</body>
  

   
 

</body>
</html>

							






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





2017-09-13 tr.odd没用
junxiaoge
不能显示背景色








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




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




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

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 389538688
站长会在每个工作日早上尽量回答提问(如果有漏掉没有回答的,请进群提醒一下)
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
站长是玻璃心,提问的时候请语气温柔些 kiss~
截止2017-5-19日累计提问 1638个,站长回答了 1546个
截止2017-8-15日累计提问 2788个,站长回答了 2544个

上传截图