对象的删除与创建

1.删除对象：

（1）、找到对象；

（2）、找到它的父对象parentObj；

（3）、parentObj.removeChild(子对象);

<input type="button" value="删除最后一个li" onclick="del();" />
<ul>
     <li>春</li>
     <li>夏</li>
     <li>秋</li>
     <li>冬</li>
</ul>
<script type="text/javascript">
    //删除最后一个li
    function del(){
        var lis = document.getElementsByTagName('li');
        var lastli = lis[lis.length-1];
        lastli.parentNode.removeChild(lastli);
    }
</script>

2.创建对象：

（1）、创建对象；

（2）、找到父对象parentObj；

（3）、parentObj.addChild(对象);

<input type="button" value="增加一个li" onclick="add();" />
<ul>
    <li>春</li>
    <li>夏</li>
    <li>秋</li>
</ul>

<script type="text/javascript">
    //增加一个li    
    function add(){
        var li = document.createElement('li');
        var txt = document.createTextNode('冬');
        li.appendChild(txt);
        document.getElementsByTagName('ul')[0].appendChild(li);
    }
</script>

3.暴力操作节点

innerHTML:代表节点内的内容，能读能写，不是一个w3c规定的标准对象属性，但是各个浏览器支持很好。

<input type="button" value="添加春夏秋" onclick="add3()" />
	<input type="button" value="添加冬" onclick="add1()" />
	<ul></ul>
	<script type="text/javascript">
	function add3(){
		var ul = document.getElementsByTagName('ul')[0];
		ul.innerHTML = '<li>春</li><li>夏</li><li>秋</li>';
	}
	function add1(){
		var ul = document.getElementsByTagName('ul')[0];
		ul.innerHTML += '<li>冬</li>';
	}
	</script>

版权声明：本文为博主原创文章，未经博主允许不得转载。