JS DOM元素的增删改
DOM元素动态操作向页面添加元素
除了document.write、innerHTML、document.createElement(“标签名”) 直接在页面创建元素外，
还可以用appendChild和insertBefore方法在页面添加元素
appendChild
appendChild的功能为添加子元素
语法： 父元素.appendChild(子元素)
特点：添加的元素会放在父元素的最后面
三种基本案例：
案例代码
<ul id="ul1">
<li id="li1">li1</li>
<li>li2</li>
<li id="li3">li3</li>
<li>li4</li>
<li>li5</li>
</ul>
<ul id="ul2">
<li>li1</li>
<li id="li2">li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
</ul>
var ul1=document.getElementById("ul1");
var li3=document.getElementById("li3");
var li2=document.getElementById("li2");
- 创建一个新元素添加到想要添加的父元素里，会被添加到父元素最后
var newLi=document.createElement("li");
newLi.innerText="我是新建的li";
ul1.appendChild(newLi);
- 如果要添加的元素原本就存在那么就会被添加到父元素的最后，且原先位置不保留
ul1.appendChild(li2);
- 如果要添加的元素有子元素那么该元素及其子元素都移动到元素的最后面
var ul2=document.getElementById("ul2");
ul1.appendChild(ul2);
insertBefore
insertBefore 功能为插入子元素
语法： 父元素.insertBefore(参数1,参数2);
参数1：需要插入的元素
参数2：插入到哪个元素的前面（插入的位置）
特点：把要插入的元素插入到指定的位置
三种基本案例：
1.新创建的元素插入
效果：插入到指定位置
var newLi=document.createElement("li");
newLi.innerText="我是新建的li";
ul1.insertBefore(newLi,li3);
2.原本存在的元素插入
效果：插入到指定位置
ul1.insertBefore(li2,li3);
3.需要插入的元素有子元素的情况
效果：该元素及其子元素都移动到指定位置
var ul2=document.getElementById("ul2");
ul1.insertBefore(ul2,li3);
DOM元素动态操作向页面删除元素
removeChid
removeChild功能为移出子元素
语法： 父元素.replaceChild(子元素)
特点：
1.元素不能调用该方法移除自己
li3.removeChild(li3);//报错
2.父元素不能移除其他元素的子元素
ul1.removeChild(li2);//报错
3.父元素只能移除自己的子元素
ul1.removeChild(li3);
DOM元素动态操作向页面修改元素
replaceChild功能为替换子元素
语法： 父元素.replaceChild(参数1,参数2);
参数1：替换的新元素
参数2：被替换的元素
特点：
1.新创建一个元素进行替换会直接替换上去
var newLi=document.createElement("li");
newLi.innerText="我是新建的li";
ul1.replaceChild(newLi,li3);
2.如果要替换的元素原本就存在，那么就把这个元素移上去，替换掉原本的元素
var li2=document.getElementById("li2");
ul1.replaceChild(li2,li3);
3.如果要替换的元素有子元素，那么该元素及其子元素一起移动上去，替换掉原本的元素
var ul2=document.getElementById("ul2");
ul1.replaceChild(ul2,li3);
案例
留言功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.div1{
width: 100%;
height: 1000px;
border: 1px solid black;
}
.greed{
display: block;
width: 100%;
height: 50px;
background-color: #01d10c;
}
.text1{
width: 90%;
height:900px;
margin:auto ;
}
img{
width: 100%;
height: 800px;
}
#talk{
width: 100%;
height: 100%;
border: 1px solid black;
}
textarea{
width: 100%;
height: 200px;
}
HR{
color: #000000;
}
li{
list-style: none;
}
</style>
</head>
<body>
<div class="div1">
<span class="greed"></span>
<div class="text1">
<p>
XXX：
</p>
<p style="padding-left: 70px;">
今天天气好好啊，上山捉鸟去了，看照片能猜出来是哪里吗
</p>
<p>
<img src="img/230856-15513665364c09.jpg">
</p>
</div>
</div>
<div id="talk">
<p>评论：</p>
<hr id="HR">
</div>
<textarea id="text2"></textarea>
<input type="button" value="提交" id="btn">
</body>
<script type="text/javascript">
//获取元素
var talk=document.getElementById("talk");
var text2=document.getElementById("text2");
var btn=document.getElementById("btn");
var HR=document.getElementById("HR")
//添加点击事件 点击提交进行留言
btn.onclick=function(){
//判断文本框有无内容
if(text2.value.length==0){
//如果没有内容 提示评论为空
alert("评论为空");
}else{
//否则 生成新的li标签 把输入的文本添加到页面上
var newLi=document.createElement("li");
newLi.innerText=text2.value
talk.insertBefore(newLi,HR);
//输入完成后清空文本框
text2.value="";
}
}
</script>
</html>
隔行变色的表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
li {
list-style: none;
}
table {
width: 800px;
height: 100%;
text-align: center;
}
</style>
</head>
<body>
<li>请输入姓名：<input type="text" id="hName" /></li>
<li>请输入邮箱：<input type="email" id="Email" /></li>
<li>请输入手机：<input type="text" id="phone" /></li>
<li>请输入地址：<input type="text" id="Place" /></li>
<input type="button" id="btn" value="添加" />
<table border="1" cellspacing="0" cellpadding="0" id="box">
<tr style="background-color: dodgerblue; color: white;">
<th>姓名</th>
<th>邮箱</th>
<th>手机</th>
<th>地址</th>
</tr>
</table>
</body>
<script type="text/javascript">
//获取元素
var inputList = document.getElementsByTagName("input");
var btn = document.getElementById("btn");
var box = document.getElementById("box");
var TD=document.getElementsByClassName("TD");
//添加事件
btn.onclick = function() {
//生成新的行
var newtr = document.createElement("tr");
newtr.className="TD";
//遍历输入框 获取每个输入框的内容 并添加到新的行
for (var i = 0; i < 4; i++) {
var newtd = document.createElement("td");
newtd.innerText = inputList[i].value;
newtr.appendChild(newtd);
//输入添加完成清空输入框
inputList[i].value="";
}
//把新的行添加到表格中
box.appendChild(newtr);
//隔行变色效果
for (var k = 0; k < TD.length; k++) {
//遍历每一行
if (k % 2 == 0) {
//如果行的序号为双数 就变成黄色
TD[k].style.backgroundColor = "yellow";
} else {
//为单数就是红色
TD[k].style.backgroundColor = "red";
}
}
}
</script>
</html>
