本文共 2201 字，大约阅读时间需要 7 分钟。

创建节点

创建元素

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

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

jQuery：直接使用$(html)

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

$('body').append($('
   
'))

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($('
   
    1231
   
'))

创建属性

原生：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($('
   
    132123
   
'))

插入节点

内部插入

原生： 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属性

2、insertAfter(target)

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

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

3、before()

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

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

4、insertBefore(target)

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