<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部插入节点</title>
<style>
li{
list-style: none;
float: left;
}
a{
width: 300px;
height: 200px;
display: block;
padding: 20px;
}
</style>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
// after()在img后添加src的内容
// $("li img").after($("li img").attr("src"));
// var src = $("li img").attr("src");
//会把img剪切到div后
// $("li img").insertAfter($("div"));
// $.parseHTML($("li img").attr("src")).insertAfter($("li img"));
// $("li img").after($("<span>新文本</span>"));
// $("<span>新文本</span>").insertAfter($("li img"));
//before()在img前面添加src内容
// $("li img").before($("li img").attr("src"));
// $("<span>新文本</span>").insertBefore($("li img"));
// $("li img").insertBefore($("div"));
// 注意,appendTo(),prependTo(),insertBefore(),insertAfter()方法具有破坏性操作特性,如果选择已存在内容,并且插入到指定对象,则原位置的内容将被删除
});
</script>
</head>
<body>
<ul class="container">
<li><a href="#"><img src="../images/200_300/1.jpg"></a></li>
<li><a href="#"><img src="../images/200_300/2.jpg"></a></li>
</ul>
<div>
<p>段落文字</p>
</div>
</body>
</html>
外部插入节点
最新推荐文章于 2021-12-21 17:30:12 发布