DOM基础之创建元素

       在JavaScript中,我们可以使用creatElement()来创建一个元素节点,也可以使用creatTextNode()来创建一个文本节点,然后将元素节点与文本节点“组装"成为我们平时所看到的”有文本内容的元素“。
    这种方式又被称为”动态DOM操作“。所谓的”动态DOM“,指的是使用JavaScript创建的元素,这个元素一开始在HTML中是不存在的。
       语法:
       var e1=document.createElement("元素名");//创建元素节点
       var txt=document.creatTextNode("文本内容");//创建文本节点
       e1.appendChild(txt);//把文本节点插入元素节点中
       e2.appendChild(e1);//把组装好的元素插入已存在的元素中
       说明:
            e1表示JavaScript动态创建的元素节点,txt表示JavaScript动态创建的文本节点,e2表示HTML中已经存在的元素节点。
            A.appendChild(B)表示把B插入到A内部中去,也就是成为A的子节点
       实例:
        

```
<!DOCTYPE >

<html xmlns="http://www.w3.org/1999/xhtml">

      <head>

            <title></title>

            <meta charset="utf-8" />

            <script>

                  window.οnlοad=function()

                  {

                        var oDiv=document.getElementById("content");

                        var oString=document.createElement("strong");

                        var oTxt=document.createTextNode("绿叶学习网");

                        

                        //将文本节点插入到strong元素

                        oString.appendChild(oTxt);

                        //将strong元素插入到div元素(这个div在HTML中已经存在

                        oDiv.appendChild(oString);

                  }

            </script>

      </head>

      <body>

            <div id="content"></div>

      </body>

</html>


```

分析:

这里使用document.createElement("strong")动态创建一个strong元素,不过此时strong元素是没有内容的。然后我们使用document.createTextNode()创建了一个文本节点,并且使用appendChild(0方法把这个文本节点插入到strong元素中。最后再使用appendChild()方法把已经建好的”有内容的strong元素(即<strong>绿叶学习网</strong>)"插入到div元素中。
        既然如此麻烦,直接写出来行嘛???????
        

```
<!DOCTYPE html>
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <title></ttitle>
        </head>
        <body>
                    <div id="content"><strong>绿叶学习网</strong></div>
        </body>
       </html>
```

不能这样写滴!!!!!!!
你肯定没理解动态创建DOM的意义
其实在HTML中直接添加元素,这是静态方法。而使用JavaScript添加元素,这是动态方法,在实际开发中很多动画我们使用静态方法是解决不了的

例2:
    创建多个元素

```
<!DOCTYPE >

<html xmlns="http://www.w3.org/1999/xhtml">

      <head>

            <title></title>

            <meta charset="utf-8" />

            <style type="text/css">

                  table {border-collapse: collapse;}

                  tr,td;

                  {

                        width: 80px;

                        height: 20px;

                        border: 1px solid gray;

                  }

                  

            </style>

            <script>

                  window.οnlοad=function()

                  {

                        //动态创建表格

                        var oTable=document.createElement("table");

                        for(var i=0;i<3;i++)

                        {

                              var oTr=document.createElement("tr");

                              for(var j=0;j<3;j++)

                              {

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

                                    oTr.appendChild(oTd);

                              }

                              oTable.appendChild(oTr);

                        }

                        //添加到body中去

                        document.body.appendChild(oTable);

                  }

            </script>

      </head>

      <body>

<!--        <div id="content"></div>

-->   </body>

</html>


```

效果是这样的哈哈哈

步骤是这样的:
1 创建元素节点:creatElement()
2 创建文本节点:createTextNode()
3 把文本节点插入到元素节点:appendChild()
4 把组装好的元素插入到已有元素中:appendChild()

 

 

 

 

 

posted @ 2019-06-27 14:25  ch_musk  阅读(180)  评论(0编辑  收藏  举报