<!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>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
