操作DOM（一）：创建节点、插入节点

创建节点

创建元素
原生：使用createElement()方法创建新元素，并返回新建元素的引用。该方法只有一个参数，用来指定创建元素的标签名称。如果要把创建的元素添加到文档中，还需要调用appendChild方法来实现
例：

var el=document.createElement('p');
document.body.appendChild(el);

jQuery：直接使用$(html)
根据参数html对所传递的HTML字符串，创建一个DOM对象，并将该对象包装为jquery对象返回
例：

$('body').append($('<div></div>'))

createElement方法只传递标签名即可，但是$()必须是完整的标签字符串

创建文本
原生：使用createTextNode()方法创建文本节点

document.createTextNode(data)

data表示字符串，参数中不能够包含HTML标签，否则JavaScript会把标签作为字符串进行显示

例：

var el = document.createElement('div');
var txt = document.createTextNode('123');
el.appendChild(txt);
document.body.appendChild(el);
或
var el = document.createElement('div');
el.innerText = '123';
document.body.appendChild(el);

jQuery：直接把文本字符串添加到元素标记字符串中即可

$('body').append($('<div>1231</div>'))

创建属性
原生：setAttribute(name,value)
name表示属性名，value表示属性值。两者必须是以字符串的形式进行传递。如果元素中存在指定的属性，它的值将被刷新；如果不存在，则为元素创建属性并赋值
例：为div设置一个title属性

var el = document.createElement('div');
var txt = document.createTextNode('123');
el.appendChild(txt);
el.setAttribute('title', '盒子')
document.body.appendChild(el);

jQuery：创建属性节点与创建文本节点相似

$('body').append($('<div title="盒子">132123</div>'))

插入节点

内部插入
原生：
1、appendChild()
2、insertBefore()

insertBefore(newchild,refchild)

insertBefore()可以在指定节点前插入元素。newchild表示要插入的新节点，refchild表示在此节点前插入新节点，返回新的子节点
例：在div元素的第一个子元素前插入一个h1元素

var div=document.getElementsByTagName('div')[0];
var h1=document.createElement('h1');
div.insertBefore(h1,div.firstChild);

jQuery：
1、append()

append(content)  或 append(function(index,html))

用来插在每个匹配元素里面的末尾。参数content可以是一个元素、HTML字符串或者jQuery对象；参数function(index,html)是一个返回HTML字符串的函数，该字符串将会被插入到匹配元素的末尾

2、appendTo(target)
将元素插入到由参数target指定的目标末尾。参数target可以是一个选择符、元素、HTML字符串或者jQuery对象
3、prepend()

prepend(content)  或  prepend(function(index,html))

把参数指定的内容插入到节点中，并返回jQuery对象。指定的内容插入到每个匹配元素里面，作为它的第一个子元素

外部插入
1、after()

after(content)  或  after(function(index))

after()方法根据设置参数在每一个匹配的元素之后插入内容
参数content是一个元素、HTML字符串或jQuery对象；function(index)表示一个返回HTML字符串的函数

例：使用after方法为每一个列表项后面插入一行字符串，该字符串是从列表结构中获取图片中的name属性

<ul>
	<li><img src="img/01.jpg" name="汽车"></li>
</ul>
<script type="text/javascript">
	$(function() {
		$('ul li img').after($('li img').attr('name'))
	})
</script>

2、insertAfter(target)
匹配的元素将会被插入到参数target指定的目标后面
例：

$(function() {
	$('<span>注释文本</span>').insertAfter($('ul li img'))
})

3、before()

before(content)  或 before(function(index))

在每个被匹配的元素之前插入内容

4、insertBefore(target)
匹配的元素将会被插入在由参数target指定的目标前面