1、内部插入
关于其内部插入的方法,有以下几种:
append()方法
实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.js"></script>
</head>
<body>
<div id="content">I love </div>
<script>
$("#content").append("<span> U</span>");
</script>
</body>
</html>
appendTo()
实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.js" "></script>
</head>
<body>
<p id="content">I Love</p>
<span id="letters"> U</span>
<script>
$("#letters").appendTo("#content");
</script>
</body>
</html>
2、外部插入
after()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.js"></script>
</head>
<body>
<span id="content">I Love </span>
<script>
$("#content").after("<span> U</span>");
</script>
</body>
</html>
insertAfter()
实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.js"></script>
</head>
<body>
<span id="content">I Love</span>
<span id="letters"> U</span>
<script>
$("#letters").insertAfter("#content");
</script>
</body>
</html>
3、包裹
wrap();
实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.js"></script>
</head>
<body>
<span>百度</span>
<script>
$("span").wrap("<a href='http://www.baidu.com'></a>");
</script>
</body>
</html>
warpAll()
实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.js"></script>
</head>
<body>
<span>百度</span>
<span>百度</span>
<span>百度</span>
<script>
$("span").wrapAll("<a href='http://www.baidu.com'></a>");
</script>
</body>
</html>
wrapInner()
实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.js"></script>
</head>
<body>
<div>百度</div>
<script>
$("div").wrapInner("<a href='http://www.baidu.com'></a>");
</script>
</body>
</html>
unwrap()
实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.js"></script>
</head>
<body>
<div>
<a href="http://www.baidu.com"><span id="link">百度</span></a>
</div>
<script>
$("#link").unwrap();
</script>
</body>
</html>