插入DOM元素是jQuery的强项之一。以下是如何使用jQuery在所有段落后插入DOM元素的完整攻略：
步骤1：使用jQuery选择器选中所有段落
在这里，我们可以使用 $('p') 来选择所有的段落。可以在 $(document).ready() 内使用下列代码：
$(document).ready(function() {
var paragraphs = $('p');
console.log(paragraphs); //测试用，可删
});
步骤2：在选中的所有段落后添加新的DOM元素
在这里，我们可以使用 after() 函数在选中的选定后面插入新的DOM元素。以下是代码示例，它将在每个段落后插入一个新的 span 元素。
$(document).ready(function() {
var paragraphs = $('p');
paragraphs.after('<span>这是一个新的段落</span>');
});
示例1：为每个段落添加图标
以下是一个更实际的示例。在文档中的每个段落后面添加一个“comment”图标
<!-- 在<head>标签中添加引入外部字体库 -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- 在<body>标签加入段落 -->
<div class="content">
<p>第一段落</p>
<p>第二段落</p>
<p>第三段落</p>
</div>
<!-- 在<script>标签中插入jQuery代码 -->
$(document).ready(function() {
$('.content p').after('<i class="material-icons comment-icon">comment</i>');
});
在上述示例中，我们使用了 Google 提供的 Material Icons 字体库，然后在每个段落后面添加了一个 span 元素，其中包含 comment 图标。
示例2：为每个段落添加超链接
以下是一个具体的示例，它将所有段落后面插入一个链接。
<!-- 在<body>标签加入段落 -->
<div class="content">
<p>第一段落</p>
<p>第二段落</p>
<p>第三段落</p>
</div>
<!-- 在<script>标签中插入jQuery代码 -->
$(document).ready(function() {
$('.content p').after('<a href="#">Read More</a>');
});
在上述示例中，我们使用 after() 函数在每个段落后面添加了一个链接，链接的文本为 "Read More"， 链接的地址为 "#"。如果需要添加其他元素，请根据需要更改 after() 函数的参数即可。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：如何用jQuery在所有段落后插入一个DOM元素 - Python技术站
微信扫一扫 
支付宝扫一扫 