Basic DOM manipulation in JQuery

1. Create an element node

For example, create two

element node, and added to

Medium
First create the element node

var $li_1=$("

");
var $li_2=$("
");
1
2
3
then the newly created node is inserted into the document

$("ul").append($li_1);
$("ul").append($li_2);/ can also be written as $("ul").append($li_1).append($li_2) /
1
2
2. Create a text node

Creating a text node is to write the text content directly when creating an element node, and then use append() and other methods to add it to the document

var $li_1=$("

• a
");
var $li_2=$("
• b
");
$("ul").append($li_1);
$("ul").append($li_2);
1
2
3
4
5
No matter how complex the html code in $(html) is, it can be created like this, E.g:

$("

• It's a complex combination
")
1
3. Create a property node

var $li_1=$("

• a
");
var $li_2=$("
• b
");
$("ul").append($li_1);
$("ul").append($li_2);
1
2
3
4
5
4. Insert node
1.append() to each matched element Append Content
Example :

HTML code:


I would like to say:


JQuery code: $("p").append(" Hello ");
Result:

I want to say: hello


1
2
3
4
2.appendTo() Appends all matching elements to the specified element
Example :

HTML code:


I would like to say:


JQuery code: $(" Hello ").appendTo("p")
Result:

I want to say: hello


1
2
3
4
3.prepend() Prepend content inside each matched element
Example :

HTML code:


I would like to say:


JQuery code: $("p").prepend(" Hello ")
Result:

Hi I would like to say:


1
2
3
4
4.prependTo() Prepend all elements to the specified element
Example :

HTML code:


I would like to say:


JQuery code: $(" Hello ").prependTo("p")
Result:

Hi I would like to say:


1
2
3
4
5.after() inserts content after each matched element
Example :

HTML code:


I would like to say:


JQuery code: $("p").after(" Hello ")
Result:

I would like to say:

Hello
1
2
3
4
6.insertAfter() inserts all matching elements after the specified element
Example :

HTML code:


I would like to say:


JQuery code: $(" Hello ").insertAfter("p")
Result:

I would like to say:

hello
1
2
3
4
7.before() insert content before each element
Example :

HTML code:


I would like to say:


JQuery code: $("p").before(" Hello ")
Result: Hello

I would like to say:


1
2
3
4
8.insertBefore() Inserts all matching elements before the specified element
　Example :
　

HTML code:


I would like to say:


JQuery code: $(" Hello ").insertBefore("p")
Result: Hello

I would like to say:


1
2
3
4
5. Remove nodes
1.remove() Removes all matching elements from the DOM. The passed parameters are used to filter elements based on jQuery expressions. When a node is deleted with the remove() method, all descendant nodes contained in the node will be deleted. The return value of this method is a reference to the node that has been deleted, so you can continue to use these elements.
Example :

var $li=$("ul li:eq(1)").remove();//After getting the node, remove it from the web page
$("ul").append($li);//Remove the node just now The deleted node is added back
1
2
The above code can be simplified to:

$("ul li:eq(1)").appendTo("ul");
//appendTo() can be used to move an element
//When moving an element, first delete the element from the document, and then insert the element into the obtained document The specified node
1
2
3
In addition, the remove() method can also selectively remove elements by passing parameters
$("ul li").remove("li[title!=a]");//The title in li is not equal to a's

• element removal

  2. detach() also removes all matching elements from the DOM, but does not delete the matching elements from the jQuery object, so these matching elements can be used in the future. Unlike remove(), all bound events, Additional data etc. are preserved.
  Example:

  $("ul li").click(function(){
  alert($(this).html());
  })
  var $li=$("ul li:eq(1)").detach();/ /Delete the element
  $li.appndTo("ul");//Re-append this element, and find that the previous click event can still be used, if it is remove(), it can no longer be used.
  1
  2
  3
  4
  5
  6
  3.empty()
  Strictly speaking, empty() does not delete the node, but clears the node, it can clear all descendant nodes in the element

  $("ul li:eq(1)").empty();
  //The second one is emptied at this time

• 
  1
  2
  6. Copy the node clone
  ()
  such as: click a li element, then copy a li element, and then add it to ul

  $("ul li").click(function(){
  $(this).clone().appendTo("ul");
  })
  1
  2
  3
  The newly copied node does not have any behavior (like the previous click event), if you want to copy the element and the event bound to the element at the same time:

  $(this).clone(true).appendTo("body");
  1
  7. Replacement node
  replaceWith() and replaceAll have the same function, but the operations are reversed
  .

  a

  To replace b , you can write the code as follows:
  Method 1: $("p").replaceWith(" b ");
  Method 2: $(" b ").replaceAll("p");

  If an event has been bound to an element before the replacement, the originally bound event will disappear together with the replaced element after the replacement, and the event needs to be re-bound on the new element.

  8. Wrap the node

  1.wrap() Wrap a node with other tags (wrap all elements individually)
  such as: $("strong").wrap("");
  the result is: b

  2.wrapAll() wraps all matching elements with one element.
  The HTML code is as follows:

  a
  b
  1
  2
  If wrap() is used, the result is as follows:

  a
  b
  1
  2
  If it is wrapAll(), the result is as follows:

  ab _