jQuery插入内容示例-优快云博客

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/147927566

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery插入内容示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
img {
max-width: 100%;
height: auto;
margin: 10px 0;
}
.inserted-content {
color: #666;
font-size: 14px;
margin: 5px 0;
padding: 5px;
background-color: #f5f5f5;
border-left: 3px solid #ccc;
}
</style>
</head>
<body>
<h1>jQuery插入内容示例</h1>

<p>这是一个演示如何在图片和文字中插入内容的示例页面。</p>

<img src="https://via.placeholder.com/300x200" alt="示例图片1">

<p>jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。</p>

<img src="https://via.placeholder.com/400x300" alt="示例图片2">

<p>在这个示例中，我们将使用jQuery在所有图片和段落后面插入指定的内容。</p>

<div>
<p>这是一个div中的段落</p>
<img src="https://via.placeholder.com/200x150" alt="示例图片3">
</div>

<script>
$(document).ready(function() {
// 在所有图片后面插入内容
$('img').after('<div class="inserted-content">123</div>');

// 在所有段落后面插入内容
$('p').after('<div class="inserted-content">123</div>');

// 注意：上面的代码会在每个图片和每个段落后面都插入内容
// 如果只想插入一次，可以使用以下代码：
/*
// 在第一个图片后面插入内容
$('img').first().after('<div class="inserted-content">123</div>');

// 在第一个段落后面插入内容
$('p').first().after('<div class="inserted-content">123</div>');
*/
});
</script>
</body>
</html>