![在这里插入图片描述](https://img-blog.csdnimg.cn/20200726170004965.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFteV93eA==,size_16,color_FFFFFF,t_70)
HTML代码:
<h1>操作dom实现增删改</h1>
<div class="content">
<div>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
</div>
<div id="btnList">
<div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
<div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
<div><button id="btn03">使用"广州"节点替换#bj解点</button></div>
<div><button id="btn04">删除#bj节点</button></div>
<div><button id="btn05">读取#city内的HTML代码</button></div>
<div><button id="btn06">设置#bj内的HTML代码</button></div>
<div><button id="btn07">通过innerHtml添加广州节点</button></div>
</div>
</div>
JavaScript代码:
window.onload = function () {
//1.创建一个"广州"节点,添加到#city下
myClick("btn01",function () {
//1.创建新元素
var li = document.createElement("li");
//2.创建文本节点
var gzText = document.createTextNode("广州");
//向 <li> 元素追加文本节点
li.appendChild(gzText);
//将创建的标签添加到city下
var city = document.getElementById("city");
city.appendChild(li);
})
//2.将"广州"节点插入到#bj前面
myClick("btn02",function () {
//1.创建新元素
var li = document.createElement("li");
//2.创建文本节点
var gzText = document.createTextNode("广州");
//向 <li> 元素追加文本节点
li.appendChild(gzText);
//将创建的标签添加到city #bj前面
var city = document.getElementById("city");
var bj = document.getElementById("bj");
city.insertBefore(li,bj);
})
//3.使用"广州"节点替换#bj节点
myClick("btn03",function () {
//1.创建新元素
var li = document.createElement("li");
//2.创建文本节点
var gzText = document.createTextNode("广州");
//向 <li> 元素追加文本节点
li.appendChild(gzText);
//使用"广州"节点替换#bj节点
var city = document.getElementById("city");
var bj = document.getElementById("bj");
//replaceChild(新节点,被替换的节点)
city.replaceChild(li,bj);
})
//4.删除#bj节点
myClick("btn04",function () {
var city = document.getElementById("city");
var bj = document.getElementById("bj");
//replaceChild(新节点,被删除的节点)
city.removeChild(bj);
//子节点.partentNode.removeChild(子节点) 常用
//bj.partentNode.removeChild(bj)
})
//5.读取#city内的HTML代码
myClick("btn05",function () {
var city = document.getElementById("city");
console.log(city.innerHTML)
})
//6.设置#bj内的HTML代码
myClick("btn06",function () {
var bj = document.getElementById("bj");
bj.innerHTML="北京变北平"
})
//7.通过innerHtml添加广州节点
myClick("btn07",function () {
var city = document.getElementById("city");
//city.innerHTML +="<li>广州</li>" 不建议使用
//1.创建新元素
var li = document.createElement("li");
//2.向li中设置文本 替换var gzText = document.createTextNode("广州") 写法
li.innerHTML="广州";
//向 <li> 添加到city中
city.appendChild(li);
})
};
function myClick(idStr,fun) {
var btn = document.getElementById(idStr);
btn.onclick = fun;
}