DOM manipulation in jQuery(1)

example:

<p title='Choose your favorite fruit'><strong>Your favorite fruit is</strong></p>
<ul>
    <li>Apple</li>
    <li>Oranges</li>
    <li>Banana</li>
</ul>

1. Find the node element

var $li=$('ul li:eq(1)')//Get the second <li> node

2. Find the attribute node

var p_txt=$('p').arrt('title')//Find the title attribute of p

3. Create element nodes

var $li=$('<li>create li element</li>')
$('ul').append($li)

4. Create a property node

var $ li = $ ('<li title ='li'> Lithium element </ li>')
$('ul').append($li)

insert node

append/appendto	Append element to matched element content / format opposite to append usage
prepend/prependto	Prepend content inside matched elements/contrary to prependto usage format
after/insertafter	Adds content to the matched element / reverses the format of the insertafter usage
befor/insertbefor	Prepends content to matched elements/contrary to insertbefor usage format

5. Delete the node

remove()

$('ul li:eq(1)').remove()//Remove the second li

The difference between detach() and remove() is that the bound event and additional data will be bound

The empty() method is to empty the content of the element, which will keep the node, not delete it

6. Copy the node

$('ul li:eq(1)').clone()//Copy the second li

7. Replace Nodes

$('p').replaceWith('La La La')//Replace the content of the <p> element with 'La La La'
$('La La La').replaceAll('p')//Replace the content of the <p> element with 'La La La'

8. Wrap the node

$('strong').wrap('<b></b>')//Wrap the <strong> node with <b>
Result: <b><strong>Your favorite fruit is</strong></b>.

The difference between <wrapall> and <wrap> is that all matching elements of the element are individually wrapped.

<wrapInner> wraps the content of the matched element.

9. Set properties

$('p').attr('name' , 'test')//Add element attributes to the <p> element, or add multiple attributes in the form of objects

10. delete attribute

$('p').removeAttr('name')//Remove the name attribute in the <p> element

DOM manipulation in jQuery(1)

Guess you like