系列文章目录
文章目录
- 系列文章目录
- 一、代码模板
- 二、DOM增删改
- 总结
一、代码模板
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM增删改</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
/*
DOM操作，增删改
增
内后
append()
appendTo()
内前
prepend()
prependTo()
外后
after()
外前
before()
删
empty():掏空
remove():删除
改
replaceWith()
*/
$(function(){
var $li = $("<li>广州</li>");
$("#btn01").click(function(){
//在#city中添加广州节点 [append()]
$("#city").prepend($li);
// $li.appendTo($("#city"));
// $("#city").append($li);
});
$("#btn02").click(function(){
//创建一个"广州"节点,添加到#city下[appendTo()]
});
$("#btn03").click(function(){
//在#city中添加广州节点[prepend()]
});
$("#btn04").click(function(){
//创建一个"广州"节点,添加到#city下[prependTo()]
});
$("#btn05").click(function(){
//在#bj前面插入"广州"节点[before()]
$li.insertBefore($("#bj"));
// $("#bj").before($li);
// $("#bj").after($li);
});
$("#btn06").click(function(){
//将"广州"节点插入到#bj前面[insertBefore()]
});
$("#btn07").click(function(){
//在#bj后面插入"广州"节点[after()]
});
$("#btn08").click(function(){
//将"广州"节点插入到#bj后面[insertAfter()]
});
$("#btn09").click(function(){
//使用"广州"节点替换#bj节点[replaceWith()]
$li.replaceAll($("#bj"));
// $("#bj").replaceWith($li);
});
$("#btn10").click(function(){
//使用"广州"节点替换#bj节点[replaceAll()]
});
$("#btn11").click(function(){
//删除#rl节点[remove()]
$("#rl").empty();
// $("#rl").remove();
});
$("#btn12").click(function(){
//掏空#city节点[empty()]
});
$("#btn13").click(function(){
//读取#city内的HTML代码
var htmlText = $("#city").html();
alert(htmlText);
});
$("#btn14").click(function(){
//设置#bj内的HTML代码
$("#bj").html("abcde");
/*
innerHTML html() <div>dsf</div><p>sdf</p>
innerText text()
value val() <input value="" />
*/
});
});
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜欢哪个城市?
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br>
<br>
<p>
你喜欢哪款单机游戏?
</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br />
<br />
<p>
你手机的操作系统是?
</p>
<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
</div>
<div class="inner">
gender:
<input type="radio" name="gender" value="male"/>
Male
<input type="radio" name="gender" value="female"/>
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="abcde"/>
</div>
</div>
<div id="btnList">
<div><button id="btn01">在#city中添加广州节点[append()]</button></div>
<div><button id="btn02">创建一个"广州"节点,添加到#city下[appendTo()]</button></div>
<div><button id="btn03">创建一个"广州"节点,添加到#city下[prepend()]</button></div>
<div><button id="btn04">创建一个"广州"节点,添加到#city下[prependTo()]</button></div>
<div><button id="btn05">在#bj前面插入"广州"节点[before()]</button></div>
<div><button id="btn06">将"广州"节点插入到#bj前面[insertBefore()]</button></div>
<div><button id="btn07">在#bj后面插入"广州"节点[after()]</button></div>
<div><button id="btn08">将"广州"节点插入到#bj后面[insertAfter()]</button></div>
<div><button id="btn09">使用"广州"节点替换#bj节点[replaceWith()]</button></div>
<div><button id="btn10">使用"广州"节点替换#bj节点[replaceAll()]</button></div>
<div><button id="btn11">删除#rl节点[remove()]</button></div>
<div><button id="btn12">掏空#city节点[empty()]</button></div>
<div><button id="btn13">读取#city内的HTML代码</button></div>
<div><button id="btn14">设置#bj内的HTML代码</button></div>
</div>
</body>
</html>
css：
@CHARSET "UTF-8";
#total{
width: 450px;
}
ul{
list-style-type: none;
}
li{
border-style: solid;
border-width: 1px;
padding: 5px;
margin: 5px;
background-color: #99ff99;
float:left;
}
.inner{
width:400px;
border-style: solid;
border-width: 1px;
margin: 10px;
padding: 10px;
float: left;
}
复制上面的代码，就可以开始学习了
二、DOM增删改
1、在#city中添加广州节点[append()]
所以删除 remove 更常用一些，因为删除更彻底，一般删除掉这个元素了，那么这个事件也没啥用了
2、创建一个"广州"节点,添加到#city下[appendTo()]
第2题跟第1题差不多 ，append改成 appendTo需要注意的是如下
思路：找到东京之后，插入到外部
3、创建一个"广州"节点,添加到#city下[prepend()]
4、创建一个"广州"节点,添加到#city下[prependTo()]
5、在#bj前面插入"广州"节点[before()]
6、将"广州"节点插入到#bj前面[insertBefore()]
7、在#bj后面插入"广州"节点[after()]
8、将"广州"节点插入到#bj后面[insertAfter()]
9、使用"广州"节点替换#bj节点[replaceWith()]
10、使用"广州"节点替换#bj节点[replaceAll()]
11、删除#rl节点[remove()]
12、掏空#city节点[empty()]
13、读取#city内的HTML代码
14、设置#bj内的HTML代码
总结
根据文档，一个一个去看即可，多练习，多写自然就会了
