jsDOM增删改查操作
/*
* dom节点增删改查
* */
//html标签元素
- 原li一
- 原li二
- 原li三
//js代码
window.οnlοad=function(){
/*
* createElement(标签名) 创建一个节点
* appendChild(节点) 追加一个节点
* */
var ul=document.getElementById("ul");
var btn_1=document.getElementById("btn_1");
btn_1.οnclick=function (){
var oli=document.createElement("li");
ul.appendChild(oli);
}
var txt_2=document.getElementById("txt_2");
var btn_2=document.getElementById("btn_2");
btn_2.οnclick=function(){
var oli=document.createElement("li");
oli.innerText=txt_2.value;
ul.appendChild(oli);
}
/*
* insertBefore(节点, 原有节点) 在已有元素前插入
*/
var btn_3=document.getElementById("btn_3");
var txt_3=document.getElementById("txt_3");
var list_3=ul.getElementsByTagName("li");
btn_3.οnclick=function(){
if(list_3[2]){
var oli=document.createElement("li");
oli.innerText=txt_3.value;
ul.insertBefore(oli,list_3[2]);
}
else{
alert("不存在此节点");
}
}
var btn_4=document.getElementById("btn_4");
var list_4=ul.getElementsByTagName("li");
btn_4.οnclick=function(){
var oli=document.createElement("li");
oli.innerText="插入的节点";
ul.insertBefore(oli,list_3[0]);
}
/*
* removeChild(节点) 删除一个节点
* */
//删除最后一个li节点
var btn_5=document.getElementById("btn_5");
var list_5=ul.getElementsByTagName("li");
btn_5.οnclick=function(){
ul.removeChild(list_5[list_5.length-1]);
}
//查找li元素
var btn_6=document.getElementById("btn_6");
var txt_6=document.getElementById("txt_6");
var list_6=ul.getElementsByTagName("li");
var a=2;
btn_6.οnclick=function (){
if(txt_6.value!=""){
a=txt_6.value;
}
if(list_6[a-1]){
list_6[a-1].style.backgroundColor="gold";
}
else{
alert("li中第"+a+"节点不存在")
}
}
}
操作结果
