下面详细讲解 "jQuery prependTo()的例子" 的完整攻略。
什么是 jQuery prependTo()?
jQuery prependTo() 方法用于将选择的 HTML 元素添加到指定 HTML 元素的开头位置。 该方法将选择的元素插入到目标的起始位置，成为目标的第一个子元素。
jQuery prependTo()的语法
$(selector).prependTo(target)
- selector：一个必选参数，表示要被插入页面的元素，可以是 HTML 标签或者任意选择器。
- target：一个必选参数，表示要被插入的位置，可以是选择器，元素，HTML 标签或者 jQuery 对象。
jQuery prependTo()的示例说明
示例一
首先创建一个 HTML 页面，里面包含一个按钮和一个空的 div 元素。当用户单击按钮时，向 div 元素中添加一些新的 html 内容。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<button id="btn">Click Me</button>
<div id="myDiv"></div>
<script>
$(document).ready(function(){
$("#btn").click(function(){
var htmlString = "<p>This is a new paragraph.</p>";
$(htmlString).prependTo("#myDiv");
});
});
</script>
</body>
</html>
当点击按钮后，会向 div 元素中添加一个新的段落元素。
示例二
创建一个 HTML 页面，其中包含一个空的 div 元素，以及一些图片的 URL 地址。
当用户单击按钮时，向 div 元素中插入一些新的 html 内容，并在这些 html 内容中插入图片。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<button id="btn">Click Me</button>
<div id="myDiv"></div>
<script>
$(document).ready(function(){
$("#btn").click(function(){
var htmlString = `
<h2>This is a new H2!</h2>
<p>This is a paragraph with a <a href="#">link</a> in it.</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
<img src="https://via.placeholder.com/150" alt="sample image">
`;
$(htmlString).prependTo("#myDiv");
});
});
</script>
</body>
</html>
当点击按钮后，将向 div 元素中插入新的 html 内容，包括带有链接的段落、列表和图像。
这样，我们就学习了 jQuery prependTo() 方法的用法和示例。希望本文对您的学习有所帮助。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery prependTo()的例子 - Python技术站
微信扫一扫 
支付宝扫一扫 