jQuery - 添加元素

通过 jQuery，可以很容易地添加新元素/内容。

添加新的 HTML 内容

我们将学习用于添加新内容的四个 jQuery 方法：

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

jQuery append() 方法

jQuery append() 方法在被选元素的结尾插入内容（仍然该元素的内部）。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){$("#btn1").click(function(){$("p").append(" <b>追加一个文本</b>。");});$("#btn2").click(function(){$("ol").append("<li>追加一个列表项</li>");});});</script>
</head><body>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<ol><li>列表项 1</li><li>列表项 2</li><li>列表项 3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表项</button>
</body>
</html>

jQuery prepend() 方法

jQuery prepend() 方法在被选元素的开头插入内容。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>夜光</title><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){$("#btn1").click(function(){$("p").prepend("<b>在开头追加文本</b> ");});$("#btn2").click(function(){$("ol").prepend("<li>在开头添加列表项</li>");});});</script>
</head>
<body><p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<ol><li>列表 1</li><li>列表 2</li><li>列表 3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表项</button></body>
</html>

考虑过append/prepend和after/before有什么区别呢？

append

<p><span class="s1">s1</span>
</p>
<script>
$("p").append('<span class="s2">s2</span>');
</script>

结果是这样的:

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

after

<p><span class="s1">s1</span>
</p>
<script>
$("p").after('<span class="s2">s2</span>');
</script>

结果是这样的:

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

嗯唔：

append/prepend 是在选择元素内部嵌入。

after/before 是在元素外面追加。

jQuery after() 和 before() 方法

jQuery after() 方法在被选元素之后插入内容。

jQuery before() 方法在被选元素之前插入内容。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){$("#btn1").click(function(){$("img").before("<b>之前</b>");});$("#btn2").click(function(){$("img").after("<i>之后</i>");});});</script>
</head><body>
<img src="img/7.png" height="310" width="340">
<br><br>
<button id="btn1">之前插入</button>
<button id="btn2">之后插入</button>
</body>
</html>

嗯唔：通过 after() 和 before() 方法添加若干新元素

after() 和 before() 方法能够通过参数接收无限数量的新元素。

可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。

我们创建若干新元素。

这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。

然后我们通过 after() 方法把这些新元素插到文本中（对 before() 同样有效）：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>夜光</title><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>function afterText(){var txt1="<b>I </b>";                    // 使用 HTML 创建元素var txt2=$("<i></i>").text("love ");     // 使用 jQuery 创建元素var txt3=document.createElement("big");  // 使用 DOM 创建元素txt3.innerHTML="Genius Team";$("img").after(txt1,txt2,txt3);          // 在图片后添加文本}</script>
</head>
<body>
<img src="img/7.png" height="310" width="340">
<br><br>
<button onclick="afterText()">之后插入</button></body>
</html>

夜光带你走进Jquery（十三）擅长的领域相关推荐

夜光带你走进Jquery（十五）擅长的领域
夜光序言: 回眸,撩起云水边的清凉,拢一袖的香,岁月行的如此悠远. 万般情愫,曾经的过往,彼时的欢喜,早在不语间随如水的文字流泻. 正文: jQuery 操作 CSS jQuery 拥有若干进行 CS ...
夜光带你走进Jquery（十四）擅长的领域
夜光序言: 一杯香茗,任岁月荏苒,落花成冢,独守一份清静寂寞在心尖的边缘躁动,悠然品茗静谧韵味. 轻轻的推开紫纱轩窗,清风柔柔地将思绪挑逗,伸手,掬起一捧月色,吟唱一首离殇婉约的诗词正文: jQu ...
夜光带你走进C# winform 操作mysql数据库（二十三）擅长的领域
夜光序言: 梦里常出现的人,醒来就应该去见他. 正文:
夜光带你走进我擅长的领域：SpringBOOT（10）
夜光序言: 有时候我们有些近视,忽略了离我们最真的情感:有时候我们有些远视,模糊了离我们最近的幸福.一辈子真的很短,远没有我们想象的那么长,永远真的没有多远.所以,对爱你的人好一点,对自己好一点,今天 ...
夜光带你走进C# 游戏开发等（七十九）擅长的领域
夜光序言: 随着时间的流逝,年龄在增长,表面是如此,可内心的成长,那才是最重要的,只有这样活着才会变得更加美好,内心的成长是每个人一生的追求,我向往内心的成长,成熟正文: using System; ...
夜光带你走进React.js（三）擅长的领域
夜光序言: 晓风夜凉,月染银霜,执笔描绘桃花妆;饮一盏桃花酿,弹一曲琴声长.墨发随风,罗衫轻扬,眉间镌刻落花殇. 正文: React JSX → 是我们学习react的核心概念 React 使用 J ...
夜光带你走进C# 游戏开发等（九十二）擅长的领域
夜光序言: 如果你总是抓着悲伤不肯放手,那么你永远都不会真正地快乐. 正文: lambda表达式:更简单的使用代理 using System; using System.Collections.Gen ...
夜光带你走进管理系统开发（一）擅长的领域
夜光序言: 墨痕未央,书信千纸不如你,不念过往,谁把一里桃花相思种下,来生绵长. 正文: 以道御术 / ...
夜光带你走进微信小程序开发（四十二）擅长的领域
夜光序言: 世人笑我痴红尘,不过红尘恋伊人. 正文: 以道御术 / 以术识道 /*夜光: pages/g ...
夜光带你走进JavaScript（五十八）擅长的领域
夜光序言: 人生旅途上,横竖都是路,决定今天的不是今天,而是昨天对人生的态度:决定明天的不是明天,而是今天对事业的作为.我们的今天由过去决定,我们的明天由今天决定~~ 正文: JavaScript 计 ...

夜光带你走进Jquery（十三）擅长的领域

夜光序言：

花开，婉约成一种等候，一种低语，蔓延了整个春。

花落，馨香辗转，听花音簌簌，待繁华落尽，鞠一捧光阴，熨帖在心，静待下一个春天。

正文：