通过js在HTML中改变元素

运用js在HTML中改变元素

比较常用的创建方法和增加方法：

createElement()                         创建元素节点对象
appendChild()                           以子节点的形式追加到指定节点中
createTextNode()                     创建文本节点
insertBefore(newNode，oldNode)                 在oldNode前插入newNode
setAttribute(属性，值)                         设置创建的标签的属性
具体实例

<script type="text/javascript">
    var main = document.body;
    //创建链接
    function createa(url,text)
    {
        var oA=document.createElement('a');
        oA.setAttribute('href',url);
       oA.style.color='red';
        oA.innerHTML=text;
        main.appendChild(oA);
    }
    // 调用函数创建链接
    createa('http://www.imooc.com','慕课网');
    
    </script> 

在这个例子中结果为一个链接到’http://www.imooc.com’网址的一个显示为慕课网的超链接。例子中运用
var oA=document.createElement(‘a’);创建一个标签a并赋给oA，使用setAttribute（）方法设置了一个href的属性并给这个属性设置一个链接地址，最后用appendChild（）方法把创建的oA追加到body标签的尾部。

	 	var oUl=document.getElementById('ul');
        var txt = document.createTextNode('段落');//创建文本
       	document.body.appendChild(txt);//在末尾添加文本
        document.body.insertBefore(txt, oUl);//在oUl前添加txt

createTextNode()方法创建一个文本节点存在内存中，先找到body下的ul标签；
insertBefore()方法则是在body中的ul前面把创建的文本节点给添加进去。

删除和替换方法

1）替换
repalceChild(newNode，oldNode) 新节点替换旧节点
2）.删除节点
父节点.removeChild(自身)

 			<ul id="ul">
                <li>aaa<a href="javascript:void(0)">删除</a></li>
                <li>bbb<a href="javascript:void(0)">删除</a></li>
                <li>ccc<a href="javascript:void(0)">删除</a></li>
                <li>ddd<a href="javascript:void(0)">删除</a></li>
            </ul>
            <script>
               var oUl=document.getElementById('ul');
                var len=document.links.length;
                for(i=0;i<len;i++){
                    document.links[i].onclick=function(){
                        this.parentNode.parentNode.removeChild(this.parentNode);
                    }
                }
  				var oP=document.createElement('p');
                oP.innerHTML='新的字母 aaa';
                oUl.replaceChild(oP,oUl.firstChild.nextSibling);

先获取到ul的id，之后获取到超链接的个数，在运用for循环遍历每一个超链接，在每个超链接上面添加一个点击事件，当你点击第几个超链接的时候调用函数，函数中的this.parentNode.parentNode.removeChild(this.parentNode);这个语句是找到超链接的父节点的父节点再用removeChild方法删掉超链接的父节点也就是标签<li >,removeChild方法使用时需要在要删除的节点的父节点上进行。
创建一个新的p标签赋值给oP，并给它添加内容;运用replaceChild()方法替换指定元素； oUl.replaceChild(oP,oUl.firstChild.nextSibling);这个语句的意思是在父节点ul上把ul中的第一个子节点的下一个子节点给替换成新创建的p标签；