创建节点
var $div = $('<div>');
var $div2 = $('<div>这是一个div元素</div>');
插入节点
1、append()和appendTo()：在现存元素的内部，从后面插入元素
var $span = $('<span>这是一个span元素</span>');
$('#div1').append($span);
......
<div id="div1"></div>
2、prepend()和prependTo()：在现存元素的内部，从前面插入元素
3、after()和insertAfter()：在现存元素的外部，从后面插入元素
4、before()和insertBefore()：在现存元素的外部，从前面插入元素
删除节点
$('#div1').remove();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点操作</title>
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
var $span = $('<span>span元素</span>');
var $p = $('<p>p段落元素</p>');
var $h = $('<h1>页面标题</h1>');
/*插入子元素*/
//div中插入span和p（末尾追加）
// $('#div1').append($span);
// $('#div1').append($p);
// 把span和p插入div中
$span.appendTo('#div1');
$p.appendTo('#div1');
//把子元素插入到父元素（前面追加）
// $('#div1').prepend($span);
// $('#div1').prepend($p);
// $span.prependTo('#div1');
// $p.prependTo('#div1');
//在div前边插入兄弟h1标题
// $('#div1').before($h);
$h.insertBefore('#div1');
//在后边插入兄弟元素
//after()
//insertAfter()
//删除p标签
$p.remove();
})
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
网友评论