<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
//創(chuàng)建節(jié)點的三種方式
方法一：通過HTML直接創(chuàng)建(把節(jié)點拼接成字符串)
var textNode1 = '<p>我是通過HTML創(chuàng)建出來的</p>';
方法二:通過JQ創(chuàng)建
var textNode2 = $('<p></p>').text('我是通過JQ創(chuàng)建出來的')
方法三：通過JS創(chuàng)建出來的DOM操作創(chuàng)建節(jié)點
var textNode3 = document.createElement("p");
textNode3.innerHTML = '我是通過js的DOM操作創(chuàng)建出來的';
把節(jié)點拼接進文檔
append() 把多個節(jié)點拼接新文檔中
A.append(B):把B節(jié)點拼接進A節(jié)點的內部結尾
$('body').append(textNode1,textNode2,textNode3);
A.appendTo(B):把A節(jié)點拼接進B節(jié)點內部結尾的位置
//$(textNode1).appendTo('body')
A.prepend(B):把B拼接在A的開始位置
//$('body').prepend(textNode3);
A.prependTo(B): 把A拼接進B節(jié)點的內部的開始位置
//$(textNode2).appendTo('body')
after() :在被選元素之后插入新的兄弟標簽
before() :在被選元素之前插入新的兄弟標簽
$('div').after(textNode1);
$('div').before(textNode1);
})
</script>
</head>
<body>
<div></div>
</body>
</html>
