鼠标点击插入元素
1、在jQuery中，我们可以使用prepend()方法向所选元素内容的“开始处”插入内容。
- 语法：
//往A的内容开始处插入B，A内容不受影响。
$(A).prepend(B)
- html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
p{background-color:orange;}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$("#btn").click(function () {
var $strong = "<strong>谢霆锋</strong>";
$("p").prepend($strong);
})
})
</script>
</head>
<body>
<p>handsome</p>
<input id="btn" type="button" value="插入"/>
</body>
</html>
运行效果：
- 点击前
- 多次点击后：
2、在jQuery中，我们可以使用before()方法向所选元素外部的“前面”插入内容。
- 语法：
//在A内容的“外部”前面插入内容B
$(A).before(B)
- html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
p{background-color:orange;}
</style>
<script src="../static/js/jquery-3.5.1.js"></script>
<script>
$(function () {
$("#btn").click(function () {
var $strong = "<strong>因为爱所以爱</strong>";
$("p").before($strong);
})
})
</script>
</head>
<body>
<p>Music</p>
<input id="btn" type="button" value="插入"/>
</body>
</html>
代码运行效果：
- 点击前：
- 两次点击后：
3、在jQuery中，我们可以使用after()方法向所选元素外部的“前面”插入内容。
-语法：
//表示往A的外部后面插入B
$(A).after(B)
1106
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
