网站链接: 我爱捣鼓
当前位置: 首页 > 前端开发  > jQuery

jQuery中append/prepend和after/before有什么区别?

2021/9/18 21:44:09

我们先来熟悉一下用于添加新内容的四个 jQuery 方法: append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容 从字面上看appe…

        我们先来熟悉一下用于添加新内容的四个 jQuery 方法:

        append()     - 在被选元素的结尾插入内容

        prepend()    - 在被选元素的开头插入内容

        after()     - 在被选元素之后插入内容

        before()     - 在被选元素之前插入内容

    从字面上看append()和after()方法都是给元素后面插入内容,但实际区别很大,我们先来看看两个例子

        append()方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery中append/prepend和after/before有什么区别?www.woaidaogu.com</title>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$("p").append('<span class="s2">s2</span>');
</script>
</head>
<body>
<p>
  <span class="s1">s1</span>
</p>
</body>
</html>

        结果是这样的:

<p>
  <span class="s1">s1</span>
  <span class="s2">s2</span>
</p>

        after()方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery中append/prepend和after/before有什么区别?www.woaidaogu.com</title>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$("p").after('<span class="s2">s2</span>');
</script>
</head>
<body>
<p>
  <span class="s1">s1</span>
</p>
</body>
</html>

        结果是这样的:

<p>
  <span class="s1">s1</span>
</p>
<span class="s2">s2</span>

        从结果不难看出append/prepend和after/before的区别,append/prepend 是在选择元素内部嵌入。after/before 是在元素外面追加。

        通过以上内容我们知道了jQuery中append/prepend和after/before的区别,感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容,希望对大家有所帮助!引用本文内容时,请注明出处!谢谢合作!

相关资讯

    暂无相关的数据...