真实项目中，我们偶尔会在JS中动态创建一些HTML标签，然后把其增加到页面中

document.createElement

在JS中动态创建一个HTML标签

appendChild

容器.appendChild(新元素) 
把当前创建的新元素添加到容器的末尾位置

insertBefore

容器.insertBefore(新元素，老元素) 
在当前容器中，把新创建的元素增加到老元素之前

//=>真实项目中很多需求都是通过动态创建元素来完成的，其中有一个需求：解析一个URL地址每一部分的信息（包含问号传递的参数值）
//->1、纯字符串拆分截取
//->2、编写强大的正则，捕获到需要的结果
//->3、通过动态创建一个A标签，利用A标签的一些内置属性来分别获取每一部分的内容
//->...

/*
 var link=document.createElement('a');
 link.href='http://www.zhufengpeixun.cn/stu/?name=zxt&age=27#teacher';//->此处地址就是我们需要解析的URL

 * hash：存储的是哈希值  '#teacher'
 * hostname：存储的是域名  'www.zhufengpeixun.cn'
 * pathname：存储的是请求资源的路径名称 '/stu/'
 * protocol：协议 'http:'
 * search：存储的是问号传递的参数值，没有传递是空字符串 '?name=zxt&age=27'
*/

function queryURLParameter(url){
    var link=document.createElement('a');
    link.href=url;

    var search=link.search,
        obj={};
    if(search.length===0) return;
    search=search.substr(1).split(/&|=/g);
    for(var i=0;i<search.length;i+=2){
        var key=search[i],
            value=search[i+1];
        obj[key]=value;
    }
    link=null;
    return obj;
}

removeChild

容器.removeChild(元素) 
在当前容器中把某一个元素移除掉

replaceChild

容器.replaceChild(新元素,老元素) 
在当前容器中，拿新元素替换老元素

cloneNode

元素.cloneNode(false/true) 
把原有的元素克隆一份一模一样的，false：只克隆当前元素本身，true：深度克隆，把当前元素本身以及元素的所有后代都进行克隆

[set/get/remove]Attribute

给当前元素设置/获取/移除 属性的（一般操作的都是它的自定义属性） 
box.setAttribute(‘myIndex’,0) 
box.getAttribute(‘myIndex’) 
box.removeAttribute(‘myIndex’)
使用xxx.index=0 和 xxx.setAttribute(‘index’,0) 这两种设置自定义属性的区别？ 
xxx.index：是把当前操作的元素当做一个普通对象，为其设置一个属性名（和页面中的HTML标签没关系） 
xxx.setAttribute：把元素当做特殊的元素对象来处理，设置的自定义属性是和页面结构中的DOM元素映射在一起的

JS中获取的元素对象，我们可以把它理解为两种角色：

与页面HTML结构无关的普通对象

与页面HTML结构存在映射关系的元素对象

元素对象中的内置属性，大部分都和页面的标签存在映射关系： 
xxx.style.backgroundColor = ‘xxx’ 此时不仅把JS中对象对应的属性值改变了，而且也会映射到页面的HTML标签上
（标签中有一个style行内样式、元素的样式改变了）
xxx.className=’xxx’ 此时不仅是把JS对象中的属性值改了，而且页面中的标签增加了class样式类（可以看见的）

元素对象中的自定义属性：xxx.index=0 
仅仅是把JS对象中增加了一个属性名（自定义的），和页面中的HTML没啥关系（在结构上看不见）

xxx.setAttribute：通过这种方式设置的自定义属性和之前提到的内置属性差不多，都是和HTML结构存在映射关系的
（设置的自定义属性可以呈现在结构上）