createElement()方法能夠根據參數指定的標簽名稱創建一個新元素，並返回新建元素的引用，用法如下
var element=document.createElement("tagName");
其中element表示新建元素的引用，createElement()是document對象的一個方法，該方法只有一個參數，用來指定創建元素的標簽名稱。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<p id="attr" class="ff">世界之大，無奇不有</p>
<ul>
</ul>
<script>
var element=document.createElement("p");
var b=element.nodeName;
var v=element.nodeType;
document.body.appendChild(element); //添加到body 子節點下
element.innerHTML="我也想去看看"; //給元素加上內容
alert(b+v);
</script>
</body>
</html>
使用createElement()方法創建的新元素不會被自動添加到文檔中，因為新元素還沒有nodeParent屬性，僅在javascript上下文中有效，如果要把這個元素添加到文檔中，還需要使用appendChild()、insertBefore()或replaceChild()方法實現。
復制節點
cloneNode()方法可以創建一個節點的副本，其用法如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<p id="attr" class="ff">世界之大，無奇不有</p>
<ul>
</ul>
<script>
var p=document.createElement("p"); //創建p元素
var h1=document.createElement("h1"); //創建h1元素
var txt=document.createTextNode("你好，世界"); //創建文本節點
var hello=txt.cloneNode(false); //復制創建的文本節點
p.appendChild(hello); //把復制的文本節點添加到段落中
h1.appendChild(p); //把段落節點增加到h1標題中
document.body.appendChild(h1); //把標題節點增加到body中
</script>
</body>
</html>
由於賦值節點會包含節點的所有特性，如果原節點中包含ID屬性，就會出現id屬性重疊情況，一般情況下，在同一個文檔中，不同呀U尿素的id屬性值應該不同，為了避免
潛在沖突，應修改其中某個節點id屬性值。
插入節點
1.appendChild()方法
appendChild()方法可向當前節點的子節點列表的末尾添加新的子節點，用法如下
appendChild(newChild)；
參數newchild表示新添加的節點對象，並返回新節點。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<p id="attr" class="ff">世界之大，無奇不有</p>
<ul>
</ul>
<script>
var p=document.createElement("p"); //創建段落元素
var txt=document.createTextNode("你好世界，世界你好"); //創建文本節點
p.appendChild(txt); //把文本節點添加到段落節點中
document.body.appendChild(p); //把段落節點添加到body節點的末尾處
</script>
</body>
</html>
2.insertBefore()方法
可在已有的子節點前插入一個新的子節點，用法如下
insertBefore(newchild，refchild)；
其中參數newchiild表示插入新的節點，refchild表示在此節點前插入新的子節點，返回新的子節點
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<p id="attr" class="ff">世界之大，無奇不有</p>
<ul>
</ul>
<script>
var p0=document.getElementById("attr");
var p=document.createElement("p"); //創建段落元素
var txt=document.createTextNode("你好世界，世界你好"); //創建文本節點
p.appendChild(txt); //把文本節點添加到段落節點中
document.body.insertBefore(p,p0); //添加段落p在p0前面
</script>
</body>
</html>
刪除節點
removeChild()方法可以從子節點列表中刪除某個節點，用法如下
nodeObject.removeChild(node)；
其中參數node為要刪除的節點，如果刪除成功，則返回被刪除的節點，如果失敗，則返回null，方使用removeChild()方法刪除節點時，該節點所包含的所有子節點將同時被刪除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<p id="attr" class="ff">世界之大，無奇不有</p>
<ul>
</ul>
<script>
var p=document.getElementById("attr"); //獲取段落節點
document.body.removeChild(p); //從body中刪除段落節點和所有的子節點
</script>
</body>
</html>
替換節點
replaceChild()方法可以將某個子節點替換為另一個。用法如下：