jquery node operation, jquery insertion node, jquery delete node, jquery dom operation

A Create a Node

1	varbox = $(‘<div>节点</div>‘); //创建一个节点，或者var box = "<div>节点</div>";

2	$(‘body‘).append(box); //将节点插入到<body>元素内部

Two Inserting nodes
JQuery provides several ways to insert a node:
1. Internal Insertion Node method

Method name	Describe
Append (content)	Inserts a node after a specified element inside the content
Append (function (index, HTML) {})	To insert a node behind a specified element using an anonymous function
AppendTo (content)	Moves the specified element back into the content inside the specified element
Prepend (content)	Inserts a node to the front of the content inside the specified element
Prepend (function (index, HTML) {})	To insert a node in front of a specified element using an anonymous function
Prependto (content)	Moves the specified element in front of content inside the specified element

code example:

01	$(‘div‘).append(‘<strong>节点</strong>‘); //向 div 内部插入 strong 节点

02	$(‘div‘).append(function(index, html) { //使用匿名函数插入节点，index为该div的索引，即第几个div，html是原节点内部内容。

03	return‘<strong>节点</strong>+index+html‘;

04

});

05	$(‘span‘).appendTo(‘div‘); //讲 span 节点移入 div 节点内

06	$(‘span‘).appendTo($(‘div‘)); //同上

07	$(‘div‘).prepend(‘<span>节点</span>‘); //将 span 插入到 div 内部的前面

08	$(‘div‘).append(function(index, html) { //使用匿名函数，同上

09	return‘<span>节点</span>‘;

10

});

11	$(‘span‘).prependTo(‘div‘); //将 span 移入 div 内部的前面

12	$(‘span‘).prependTo($(‘div‘)); //同上

2. External Insertion Node method

Method name	Describe
After (content)	Inserts a node after the outside of the specified element content
After (function (index, HTML) {})	To insert a node behind a specified element using an anonymous function
Before (content)	Inserts a node before the outside of the specified element content
Before (function (index, HTML) {})	To insert a node before the outside of the specified element using an anonymous function
InsertAfter (content)	Moves the specified node back to the content outside of the specified element
InsertBefore (content)	Moves the specified node to the front of the content outside of the specified element

code example:

01	$(‘div‘).after(‘<span>节点</span>‘); //向 div 的同级节点后面插入 span

02	$(‘div‘).after(function(index, html) { //使用匿名函数，同上

03	return‘<span>节点</span>‘;

04

});

05	$(‘div‘).before(‘<span>节点</span>‘); //向 div 的同级节点前面插入 span

06	$(‘div‘).before(function(index, html) { //使用匿名函数，同上

07	return‘<span>节点</span>‘;

08

});

09	$(‘span‘).insertAfter(‘div‘); //将 span 元素移到 div 元素外部的后面

10	$(‘span‘).insertBefore(‘div‘); //将 span 元素移到 div 元素外部的前面

Three Parcel nodes
JQuery Wrapping a node is the meaning of using a string code to include the code of the specified element.

Method name	Describe
Wrap (HTML)	Wraps a layer of HTML code into the specified element
Wrap (Element)	Wraps a layer of DOM object nodes to a specified element
Wrap (function (index) {})	Wrap a layer of custom content into a specified element using an anonymous function
Unwrap ()	Removes the contents of a specified element package
Wrapall (HTML)	Wrap all the elements together in HTML
Wrapall (Element)	Wrap all the elements together with a DOM object
Wrapinner (HTML)	Wraps a layer of HTML into the child content of the specified element
Wrapinner (Element)	Wraps a layer of DOM object nodes into the child content of the specified element
Wrapinner (function (index) {})	Wrapping a layer of child content of a specified element with an anonymous function

code example:

01	$(‘div‘).wrap(‘<strong></strong>‘); //在 div 外层包裹一层 strong

02	$(‘div‘).wrap(‘<strong>123</strong>‘); //包裹的元素可以带内容

03	$(‘div‘).wrap(‘<strong><em></em></strong>‘); //包裹多个元素

04	$(‘div‘).wrap($(‘strong‘).get(0)); //也可以包裹一个原生 DOM

05	$(‘div‘).wrap(document.createElement(‘strong‘)); //临时的原生 DOM

06	$(‘div‘).wrap(function(index) { //匿名函数

07	return‘<strong></strong>‘;

08

});

09	$(‘div‘).unwrap(); //移除一层包裹内容，多个需移除多次

10	$(‘div‘).wrapAll(‘<strong></strong>‘); //所有 div 外面只包一层 strong

11	$(‘div‘).wrapAll($(‘strong‘).get(0)); //同上

12	$(‘div‘).wrapInner(‘<strong></strong>‘); //包裹子元素内容

13	$(‘div‘).wrapInner($(‘strong‘).get(0)); //DOM 节点

14	$(‘div‘).wrapInner(function() { //匿名函数

15	return‘<strong></strong>‘;

16

});

Note: The difference between. Wrap () and. Wrapall () is that each element is treated as a separate body, containing a layer of outer layers respectively, which takes all elements as a whole as a single body, containing only one layer of outer layers. Both of these are contained in the outer layer, while. Wrapinner () is contained within the inner layers.

Four Node operations
In addition to creating, inserting, and wrapping nodes, JQuery provides some common methods for node operations: copying, replacing, and deleting nodes.

1

//复制节点

2	$(‘body‘).append($(‘div‘).clone(true)); //复制一个节点添加到 HTML 中

Note: The Clone (true) parameter can be null, which means that only elements and content are copied, and the event behavior is not replicated. In addition to the true parameter, the event handling behavior that accompanies this element is also duplicated.

1

//删除节点

2	$(‘div‘).remove(); //直接删除 div 元素

Note: When the. Remove () parameter is removed, the element specified by the preceding object selector is deleted. and. Remove () can also take a selector parameter, such as: $ (' div '). Remove (' #box '); Delete only the Id=box div.

1	//保留事件的删除节点

2	$(‘div‘).detach(); //保留事件行为的删除

Note: the. Remove () and. Detach () are both delete nodes, and after the deletion itself the method can return the currently deleted node object, but the difference is that the former does not preserve the event behavior while recovering, while the latter retains it.

View Code printing?

1

//清空节点

2	$(‘div‘).empty(); //删除掉节点里的内容

3

//替换节点

4	$(‘div‘).replaceWith(‘<span>节点</span>‘); //将 div 替换成 span 元素

5	$(‘<span>节点</span>‘).replaceAll(‘div‘); //同上

jquery node operation, jquery insertion node, jquery delete node, jquery dom operation