创建元素：document.createElement(标签名称);
删除元素：父级.removeChild(要删除的元素);
追加子元素：父级.appendChild(要添加的元素)
在指定元素前面插入一个新元素：父级.insertBefore(新的元素，被插入的元素)
HTML部分：
<body>
<input type="text" id="text1">
<input type="button" id="btn" value="留言">
<ul id="ul1"></ul>
</body>
JS部分：
window.onload = function(){
var oText = document.getElementById(‘text1‘);
var oBtn = document.getElementById(‘btn‘);
var oUl = document.getElementById(‘ul1‘);
oBtn.onclick = function(){
// 通过document.createElement创建li
var oLi = document.createElement(‘li‘);
// 然后把文本框的value值赋给li
oLi.innerHTML = oText.value;
//通过document.creatElement创建a
var oA = document.createElement(‘a‘);
//给a添加href和innerHMTLE
oA.href = ‘javascript:;‘;
oA.innerHTML = ‘删除‘;
//给a链接添加单击事件
oA.onclick = function() {
// 父级.removeChild(要删除的元素); 删除元素
oUl.removeChild(this.parentNode);
}
//接着通过appendChild添加子元素 父级.appendChild(要添加的元素)
oLi.appendChild(oA);
// 接着清空文本框的value值
oText.value = ‘‘;
// 父级.insertBefore(新的元素，被插入的元素) 方法 在指定元素前面插入一个新元素
// oUl.insertBefore( oLi ,oUl.children[0] );
/*
兼容处理
在ie下如果第二个参数的节点不存在，会报错
在其他标准浏览器下如果第二个参数的节点不存在，则会以appendChild的形式进行添加
*/
if ( oUl.children[0] ) {
oUl.insertBefore( oLi, oUl.children[0] );
} else {
oUl.appendChild( oLi );
}
};
};
时间： 2024-08-19 11:24:11