<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>13.2jQuery元素内插入节点的方法</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
//1.append():向每个匹配的元素内部追加内容
var $score1 = $("<span><b>HTML5</b></span>");
$("#p1").append($score1);
//2.appendTo():将所有匹配的内容追加到指定元素中
var $score2 = $("<span><strong>CSS3</strong></span>");
$score2.appendTo("#p2");
//3.append(function(index,html){}),参数可以是函数
//index:元素的索引值，html：元素原来默认值
//方法1：不传递参数
$('h3').append(function(){
return "<span>HTML</span>";
});
//方法2：传递参数
$('li').append(function(index,html){
//index:就是li的索引
//html:就是li初始的值
return "<strong><i>索引值是:"+index+"内容是:"+html+"</i></strong>";
});
//4.prepend():向每个匹配元素内部前置内容
var $apple = $("<span>苹果</span>");
//$("#p3")是匹配的元素
//$apple是添加的内容
$("#p3").prepend($apple);
//结果: <p id="p3"><span>苹果</span>我喜欢。</p>
//5.prependTo()将所匹配的元素前置到指定的元素中
var $orange = $("<span>桔子</span>");
//$orange是匹配的元素
//$("#p4")是指定的元素
$orange.prependTo($("#p4"));
//结果:<p id="p4"><span>桔子</span>我喜欢。</p>
//6.prepend(function(index,html){return "";})
//举例练习
});
</script>
</head>
<body>
<p id="p1">我喜欢学习</p>
<p id="p2">他喜欢学习</p>
<h3>CSS使用</h3>
<h3>JavaScript使用</h3>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>Jquery</li>
</ul>
<p id="p3">我喜欢。</p>
<p id="p4">我喜欢。</p>
</body>
</html>
编辑视图
运行视图
