dom操作

页面内容

<!doctype html>
<head>
<meta charset="utf-8">
<style>
#parent{width: 500px;height: 500px;background: #000;padding: 20px;margin: 0 auto;}
.child{font-size: 30px;color: #fff;}
</style>
</head>
<body>
<div id="parent">
<div class="child child2">这是第二个子元素</div>
</div>
<script src="js/jquery.1.4.2-min.js"></script>
<script>
var child = '<div class="child">这是插入的子元素</div>'
</script>
</body>
</html>

 

 

js操作

// 添加元素节点
 $('#parent').append(child);

// 在指定节点前插入节点insertBefore()
 $(child).insertBefore('.child2')

// 在指定节点前插入节点 
 $(child).insertAfter('.child2')

// 删除元素节点
 $('#parent div').remove('.child2')

// 替换节点
 $('.child2').replaceWith(child)

// 复制节点(true代表克隆节点上的事件,可去掉)
$('.child2').clone(true).appendTo('#parent')

 

posted @ 2018-06-28 10:35  柚子乌拉拉  Views(82)  Comments(0Edit  收藏  举报