jQuery添加标签元素/内容

r囧r小猫 2021-06-26 16:06 589阅读 0赞

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

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

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

### jQuery append() 方法 . ###

**`append()` 方法在被选元素的结尾插入内容**

$("p").append("追加文本");

**操作前后的代码对比**  
前：`<p id="test1">这是一个有字的段落。</p>`  
后：`<p>这是一个段落。 <b>追加文本</b>。</p>`

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

$("p").prepend("追加文本");

**操作前后的代码对比**  
前：`<p id="test1">这是一个有字的段落。</p>`  
后：`<p><b>追加文本</b>这是一个段落</p>`

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

$("img").after("在后面添加文本");
    $("img").before("在前面添加文本");

结果：

通过 `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>菜鸟教程(runoob.com)</title>
    <script src="http://cdn.static.runoob.com/libs/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="jQuery!"; $("img").after(txt1,txt2,txt3); // 在图片后添加文本 } </script>
    </head>
    <body>
    
    <img src="/images/logo2.png" >
    <br><br>
    <button onclick="afterText()">之后插入</button>
    
    </body>
    </html>

插入之后

<body style="">
    <img src="/images/logo2.png">
    <b>I </b>
    <i>love </i>
    <big>jQuery!</big>
    <br><br>
    <button onclick="afterText()">之后插入</button>
    </body>