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()
