效果展示:
示例代码:
document.createElement(标签名称); 创建元素
<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>
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>