页面内容
<!doctype html>
<head>
<meta charset="utf-8">
<style>
#parent{ 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')