jqurey四种html方法分别为:
1、appendTo()方法: 作用是在被选节点结尾添加新元素
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>被选节点结尾添加新元素</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('button').click(function(){
$('<span>我是新元素</span>').appendTo('p');
});
});
</script>
</head>
<body>
<p>内容AAAA</p>
<button>在节点结尾添加元素</button>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2、prependTo()方法：作用是在被选节点开头添加新元素
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>被选节点开头添加新元素</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('button').click(function(){
$('<span>我是新元素</span>').prependTo('p');
});
});
</script>
</head>
<body>
<p>内容AAAA</p>
<button>在节点开头添加元素</button>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3、insertAfter()方法: 作用是在被选节点后面添加新元素
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>被选节点后面添加新元素</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('button').click(function(){
$('<span>我是新元素</span>').insertAfter('p');
});
});
</script>
</head>
<body>
<p>内容AAAA</p>
<button>在节点后面添加元素</button>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4、insertBefore()方法: 作用是在被选节点前面添加新元素
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>被选节点前面添加新元素</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('button').click(function(){
$('<span>我是新元素</span>').insertBefore('p');
});
});
</script>
</head>
<body>
<p>内容AAAA</p>
<button>在节点前面添加元素</button>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
appendTo()和insertAfter()的不同之处在于，前者是在结尾处添加（被所选节点元素包裹在内的），后者则与所选节点平级，prependTo()和insertBefore()也是同理