jQuery中append与appendTo区别

最新推荐文章于 2022-05-16 21:21:17 发布

祭奠丶青春

最新推荐文章于 2022-05-16 21:21:17 发布

阅读量207

点赞数

本文链接：https://blog.csdn.net/huanggang0101/article/details/101051808

版权

append(content)的用法:

功能是向指定的元素中追加内容，被追加的content参数，可以是字符、HTML元素标记，还可以是一个返回字符串内容的函数。

使用格式: $(selector).append(content)

实例用法:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
</head>
<body>
	<p>I come from</p>
	<p>I love</p>
</body>
</html>
<script>
	$("p").append("china");//向p标签追加一个单词
	//输出结果为<p>I come from china</p><p>I love china</p>
</script>

由此可见 append(content)是向指定元素中追加内容

appendTo()的用法:

功能是把所有匹配的元素追加到指定的元素元素集合中.

使用格式:$(content).append(selector)

实例用法:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
</head>
<body>
	<span>I come from</span>
	<p></p>
</body>
</html>
<script>
	$("span").appendTo("p");//把标签span追加到标签p中去
	//输出结果为<p><span>I come from</span></p>
</script>