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()方法可以将某个子节点替换为另一个。用法如下：