收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--引入jQuery文件-->
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<title>jQuery操作DOM节点</title>
<style>
body{margin: 0;padding: 0;}
.main{width: 1200px;height: auto;margin: auto;box-shadow: 3px 3px 5px #888;overflow: hidden; margin-top: 40px;}
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; zoom: 1;}
.main ul{margin-top: 20px;margin-bottom: 20px;}
.main ul li{float: left; list-style: none; padding: 0 35px;}
.main ul li img{width: 300px; height: 300px;object-fit: cover; box-shadow: 5px 5px 10px #666; border-radius: 50%;}
.main ul li p{text-align: center; height: 40px; line-height: 40px; margin: 0;}
</style>
<script>
$(function () {
/*
1. 父子节点的操作:
append()向元素内部追回元素
prepend(): 向元素内部添加前置元素
appendTo():追回到指定的元素集合中
prependTo(): 将元素前置到指定集合中
2. 兄弟节点的操作:
after(): 在匹配的元素之后插入
before(): 在匹配的元素之前插入
*/
//用原生jS添加一个元素
var ul = document.getElementsByTagName('ul')[0]
// 创建一个li元素
var li7 = document.createElement('li')
// 给新建li元素增加内容
li7.innerHTML = '<img src="http://pic.axlcg.com/download/20170526_175547647.jpg" alt=""><p>这个美女</p>'
// 追回元素appendchild是JS原生写法，跟append用法一样
// 如果不引入jquery,append不生效,如果引入了jquery可以写成append
// 其他浏览器下可正常显示，但是IE内核下会报错，所以用原生的话还是要写成appendchild
ul.appendChild(li7)
// jQuery写法
//1.获取ul中的第一个p节点
var p1=$('p')[0]
//prepend给第一个li节点的p标签添加前置元素
p1.prepend('我是本身存在的第一个')
//prepend给第二个li节点的p标签添加后置元素
var p2=$('p')[1]
p2.append('--是原生JS写的')
// 跟开始的原生写法效果一样
var li8= $('<li><img src="http://pic.axlcg.com/download/20170527_114545342.jpg" alt=""><p>appendTO插入的美女</p></li>')
li8.appendTo('ul')
// 创建一个li插入到列表中的第一个
var li9= $('<li><img src="http://pic.axlcg.com/download/20170526_180830781.jpg" alt=""><p>prependto插入的美女</p></li>')
li9.prependTo('ul')
// 在li9之前再插入一个
li9.before('<li><img src="http://pic.axlcg.com/download/20170527_110741814.jpg" alt=""><p>before插入的美女（在prependTO之前）</p></li>')
// 在li9之后插入一个
li9.after('<li><img src="http://pic.axlcg.com/download/20170526_181841235.jpg" alt=""><p>after插入的美女（在prependTO之后）</p></li>')
})
</script>
</head>
<body>
<div class="main clearfix">
<ul class="clearfix">
<li><img src="http://pic.axlcg.com/download/20170526_180830781.jpg" alt=""><p>美女</p></li>
</ul>
</div>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
