<!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(){
//创建节点的三种方式
方法一：通过HTML直接创建(把节点拼接成字符串)
var textNode1 = '<p>我是通过HTML创建出来的</p>';
方法二:通过JQ创建
var textNode2 = $('<p></p>').text('我是通过JQ创建出来的')
方法三：通过JS创建出来的DOM操作创建节点
var textNode3 = document.createElement("p");
textNode3.innerHTML = '我是通过js的DOM操作创建出来的';
把节点拼接进文档
append() 把多个节点拼接新文档中
A.append(B):把B节点拼接进A节点的内部结尾
$('body').append(textNode1,textNode2,textNode3);
A.appendTo(B):把A节点拼接进B节点内部结尾的位置
//$(textNode1).appendTo('body')
A.prepend(B):把B拼接在A的开始位置
//$('body').prepend(textNode3);
A.prependTo(B): 把A拼接进B节点的内部的开始位置
//$(textNode2).appendTo('body')
after() :在被选元素之后插入新的兄弟标签
before() :在被选元素之前插入新的兄弟标签
$('div').after(textNode1);
$('div').before(textNode1);
})
</script>
</head>
<body>
<div></div>
</body>
</html>
