JS DOM之元素操作

效果展示：

示例代码：

<script>
window.onload = function() {
	var oText = document.getElementById('text1');
	var oBtn = document.getElementById('btn');
	var oUl = document.getElementById('ul1');
	
	oBtn.onclick = function() {
        }
}
</script>
<body>
	<input type="text" id="text1" /><input type="button" value="留言" id="btn" />
	<ul id="ul1"></ul>
</body>

document.createElement(标签名称); 创建元素

var oLi = document.createElement('li');	
oLi.innerHTML = oText.value;

添加到页面中

父级.appendChild(要添加的元素) 方法追加子元素

oUl.appendChild( oLi );

父级.insertBefore(新的元素，被插入的元素) 方法在指定元素前面插入一个新元素

在ie下如果第二个参数的节点不存在，会报错

在其他标准浏览器下如果第二个参数的节点不存在，则会以appendChild的形式进行添加

if ( oUl.children[0] ) {
	oUl.insertBefore( oLi, oUl.children[0] );
} else {
	oUl.appendChild( oLi );
}

父级.removeChild(要删除的元素); 删除元素

var oA = document.createElement('a');
		oA.innerHTML = '删除';
		oA.href = 'javascript:;';
		oA.onclick = function() {
			
			oUl.removeChild( this.parentNode );
			
		}
		oLi.appendChild( oA );

父级.replaceChild(新节点，被替换节点) 替换子节点

appendChild,insertBefore,replaceChild都可以操作动态创建出来的节点，也可以操作已有节点（剪切操作）

<script>
window.onload = function() {
	
	var oDiv = document.getElementById('div1');
	var oBtn = document.getElementById('btn');
	var oP = document.getElementById('p1');
	
	oBtn.onclick = function() {
		
		document.body.replaceChild( oDiv, oP );

		//oP.appendChild( oDiv );
		
	}
	
}
</script>
</head>

<body>
	<div id="div1">div1</div>
    <input type="button" value="按钮" id="btn" />
    <hr />
    <p id="p1">ppppp</p>
</body>

猜你喜欢