jQuery实现在元素的不同位置插入元素（内部插入和外部插入）

最新推荐文章于 2024-09-07 15:36:00 发布

前端筱园

最新推荐文章于 2024-09-07 15:36:00 发布

阅读量8.7k

点赞数 1

分类专栏： jQuery 文章标签： jQuery插入元素不同位置插入节点

dengzhanyong

本文链接：https://blog.csdn.net/DengZY926/article/details/82107054

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

内部插入

1.append()

append()方法可以在某元素的尾部插入元素，插入的元素作为最后一个子元素。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery/jquery-3.1.1.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){ 
    $(".container").append('<li><img src="images/3.png" /></li>');
})
</script>
</head>
<body>
<h2>浏览器图标</h2>
<ul class="container">
    <li><img src="images/1.png" /></li>
    <li><img src="images/2.png" /></li>
</ul>
</body>
</html>

2.appendTo()

appendTo()方法将匹配元素插入到目标元素的最后面。与append()方法操作相反。

$(".aa").append($("h2"));
等同于
$("h2").appendTo($(".aa"));

3.prepend()

prepend()方法能够把参数指定的内容插入到指定的节点中，并返回一个jQuery对象。指定的内容被插入到每个匹配元素里面的最前面，作为它的第一个子元素。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery/jquery-3.1.1.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){ 
    $(".container").prepend('<li><img src="images/3.png" /></li>');
})
</script>
</head>
<body>
<h2>浏览器图标</h2>
<ul class="container">
    <li><img src="images/1.png" /></li>
    <li><img src="images/2.png" /></li>
</ul>
</body>
</html>

外部插入

1.after()

after()方法能够根据设置的参数在每一个匹配的元素之后插入内容。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery/jquery-3.1.1.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){ 
    $("li img").after($("li img").attr("src"));
})
</script>
<style type="text/css">
li{ float:left;}
li img { height:200px;}

</style>
</head>
<body>
<ul class="container">
    <li><img src="images/1.jpg" /></li>
    <li><img src="images/2.jpg" /></li>
</ul>
</body>
</html>

2.insertAfter()

insertAfter()与after()方法功能相同，但用法相反。

$("li mag").after($("<span>注释文本</span>"));
等同于：
$("<span>注释文本</span>").insertAfter($("li mag"));

3.before()

before()方法为每个匹配的元素之前插入内容。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery/jquery-3.1.1.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){ 
    $("li img").before($("li img").attr("src"));
})
</script>
<style type="text/css">
li{ float:left;}
li img { height:200px;}

</style>
</head>
<body>
<ul class="container">
    <li><img src="images/1.jpg" /></li>
    <li><img src="images/2.jpg" /></li>
</ul>
</body>
</html>