第十六课：4_8jQuery的DOM基本操作
代码：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>病因分析之外因</title>
<style type="text/css">
li {
background-color: lightskyblue;
width: 300px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<ul>
<li>风</li>
<li>寒</li>
<li>暑</li>
<li>湿</li>
<li>燥</li>
<li>火</li>
</ul>
<button>appendTo()</button>
<!-- appendTo()方法在被选元素的结尾（仍然在内部）插入指定内容。 -->
<button>prependTo()</button>
<!-- prependTo() 方法在被选元素的开头（仍位于内部）插入指定内容。 -->
<button>insertAfter()</button>
<!-- insertAfter() 方法在被选元素之后插入 HTML 标记或已有的元素。 -->
<button>insertBefore()</button>
<!-- insertBefore() 方法在被选元素之前插入 HTML 标记或已有的元素。 -->
<p style="background-color: orange;width: 300px;">六个外因</li>
<p style="background-color: orange;width: 300px;">病因有内因、外因、不内外因</li>
<p style="background-color: orange;width: 300px;">风为百病之长</li>
<p style="background-color: orange;width: 300px;">学习重点回顾：</li>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$('button').eq(0).on('click',function(){
/**
* 1.appendTo()
* 语法: content.appendTo(target)
* 参数: 要添加或移动到的节点
* 功能: 插入到目标元素内容的后面
*/
//1. 添加操作
//第一步: 生成节点元素,添加内容,并设置样式
var li = $('<li>').css('background-color','lightgreen').html('六个外因')
//第二点: 将新节点插入到目标节点内容的后面
li.appendTo($('ul'))
})
///////////////////////////////////////////////////////////////
$('button').eq(1).on('click',function(){
/**
* 2.prependTo()
* 语法: content.prepend(target)
* 参数: 要添加或移动的节点
* 功能: 插入到目标元素内容的前面
*/
//1. 添加操作
//第一步: 生成节点元素,添加内容,并设置样式
var li = $('<li>').css('background-color','lightgreen').html('病因有内因、外因、不内外因')
//第二点: 将新节点插入到目标节点内容的后面
li.prependTo($('ul'))
})
///////////////////////////////////////////////////////////////
$('button').eq(2).on('click',function(){
/**
* 3.insertAfter()
* 语法: content.after(target)
* 参数: 要插入的节点
* 功能: 插入到目标节点的后面
*/
//1. 添加操作
//第一步: 生成节点元素,添加内容,并设置样式
var p = $('<li>').css('background-color','lightgreen').html('风为百病之长')
//第二点: 将新节点插入到目标节点的后面
// p.insertAfter($('ul'))
p.insertAfter($('li:eq(0)'))
})
///////////////////////////////////////////////////////////////
$('button').eq(3).on('click',function(){
/**
* 4.InsertBefore()
* 语法: content.insertBefore(target)
* 参数: 要插入的节点
* 功能: 插入到目标元素的前面
*/
//1. 添加操作
//第一步: 生成节点元素,添加内容,并设置样式
var p = $('<li>').css('background-color','lightgreen').html('学习重点回顾：')
//2.移动操作(请将添加操作的代码注释掉)
//移动到<ul>之前
$('p:eq(3)').insertBefore($('ul'))
//移动到第3个<li>之前
// $('p:eq(3)').insertBefore($('li:eq(2)'))
})
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
