jQuery DOM manipulation (Manipulation)

 

jQuery Manipulation is mainly used to manipulate the addition, deletion and modification of DOM elements.

Changing Contents (Changing Contents)

.html() -Similar to innerHTML in JavaScript DOM

// Get the HTML content of the matched element (no parameters)
.html()

// Set the HTML content of the matched element (with parameters)
.html(htmlString)

// E.g:HTML
<div></div>

// jQuery
$('div').html('<p>Hello World</p>'); 
// The results obtained
[<div><p>Hello World</p></div>]

If included <script>, <link rel="stylesheet">these external files will help you load jQuery, and <script></script>the code between jQuery will help you eval.

---

.text() Plain text content

// Get a string containing all the matching elements in plain text (no parameters)
.text()

// E.g. HTML
<p><em>Test1.</em>Test12.</p><p>Test3</p>
// jQuery
$('p').text();
// The results obtained
Test1.Test2.Test3

// Set the plain text content of all matched elements (with parameters)
// "<" and ">" in text will be automatically converted into HTML entities
.text(text)

Inserting content (Inserting)

Related functions have .append(), .prepend(), .before(), .after()and so on.

.append(content)-Add content at the end of each matched element (internal insertion)

// E.g. HTML
<p>I would like to say: </p> 
// jQuery
$('p').append('<b>Hello</b>'); 
// The results obtained
[<p>I would like to say: <b>Hello</b></p>]

.prepend(content)-Add to the front of each matched element... (internal insertion)

// E.g. HTML
<p>I would like to say: </p> 
// jQuery
$('p').prepend('<b>Hello</b>'); 
// The results obtained
[<p><b>Hello</b>I would like to say: </p>]

.before(content)-add in front of each matched element... (external insertion)

// 例如 HTML
<p>I would like to say: </p> 
// jQuery codes
$('p').before('<b>Hello</b>'); 
// The results obtained
[<b>Hello</b><p>I would like to say: </p>]

.after(content)-Add... (external insertion) after each matched element

//  E.g:HTML
<p>I would like to say: </p> 
// jQuery
$('p').after('<b>Hello</b>');
// The results obtained
[<p>I would like to say: </p><b>Hello</b>]

Moving elements

If you put "jQuery" or "DOM" objects in the parameters of the previous functions, it means to move them.

.append(jQuery or DOM)

//  E.g:HTML
<p>I would like to say: </p><b>Hello</b>
// jQuery
$('p').append( $('b') );
// The results obtained
[<p>I would like to say: <b>Hello</b></p>]

.prepend(jQuery or DOM)

//  E.g:HTML
<p>I would like to say: </p><b>Hello</b>
// jQuery
$('p').prepend( $('b') );
// The results obtained
[<p><b>Hello</b>I would like to say: </p>]

.before(jQuery or DOM)

//  E.g:HTML
<p>I would like to say: </p><b>Hello</b>
// jQuery
$('p').before( $('b') );
// The results obtained
[<b>Hello</b><p>I would like to say: </p>]

.after(jQuery or DOM)

//  E.g:HTML
<b>Hello</b><p>I would like to say: </p>
// jQuery
$('p').after( $('b') );
// The results obtained
[<p>I would like to say: </p><b>Hello</b>]

Wrap yourself (Inserting Around)

.wrap(html)-individually wrap the matched elements

//  E.g:HTML
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

// jQuery
$('.inner').wrap('<div class="new"></div>');

// The results obtained
<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
  </div>
  <div class="new">
    <div class="inner">Goodbye</div>
  </div>
</div>

.wrapAll(html)-wrap all matched elements together

//  E.g:HTML
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

// jQuery
$('.inner').wrapAll('<div class="new" />');

// The results obtained
<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
  </div>
</div>

.wrapInner(html)-individually wrap the matched elements

//  E.g:HTML
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

// jQuery
$('.inner').wrapInner('<div class="new"></div>');

// The results obtained
<div class="container">
  <div class="inner">
    <div class="new">Hello</div>
  </div>
  <div class="inner">
    <div class="new">Goodbye</div>
  </div>
</div>

Remove elements (Removing)

.empty()-delete all child nodes of the matched element

//  E.g:HTML
<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

// jQuery
$('.hello').empty();

// The results obtained
<div class="container">
  <div class="hello"></div>
  <div class="goodbye">Goodbye</div>
</div>

.remove([selector])-remove all matched elements from the DOM

//  E.g:HTML
<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

// jQuery
$('.hello').remove();

// The results obtained
<div class="container">
  <div class="goodbye">Goodbye</div>
</div>

// We can also bring in one more selector parameter to filter the matched elements
// For example, writing like this will get the same result as above
$('div').remove('.hello');

Copying elements (Copying)

.clone([true])-make a copy of the matched element

//  E.g:HTML
<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

// jQuery
$('.hello').clone().appendTo('.goodbye');

// The results obtained
<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>

// But if you don't use .clone() you will get this result
<div class="container">
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>

If you want to copy the bound event together, add a true parameter.clone(true).