实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
li {
list-style: none;
width: 50px;
height: 50px;
background-color: lightgreen;
border: 1px solid #888;
border-radius: 50%;
margin: 10px;
text-align: center;
line-height: 50px;
}
p {
list-style: none;
width: 50px;
height: 50px;
background-color: lightblue;
border: 1px solid #888;
border-radius: 50%;
margin: 10px;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<button>append</button>
<button>prepend</button>
<button>After</button>
<button>Before</button>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
</body>
<script type="text/javascript" src="js/jquery-3.3.1.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('5')
//第二点: 将新节点插入到目标节点内容的后面
li.appendTo($('ul'))
//2.移动操作(请将添加操作的代码注释掉)
// $('p:first').appendTo($('ul'))
})
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
