jQuery practice #3 - DOM manipulation

jQuery is a Javascript framework. When do we use Javascript, jQuery, jQuery UI

DOM Manipulation in jQuery

What jQuery does?

jQuery is a JavaScript library that can:

• Access parts of a page
• Modify the appearance of the page
• Alter the content of the page
• Respond to user interaction with the page
• Add animation to a page

Manipulating DOM with jQuery methods

1. To insert new elements inside every matched element, use:

• .append()
• .appendTo()
• .prependTo()
• .prepend()

Example for .prepend() in jQuery

HTML:


<div class="productsContent one-box">
<div class="box">
<h4> Loreum ipsum1</h4>
<p> Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit... </p>
</div>
</div>




Prepending an element using jQuery:

$('.productsContent').prepend('November, 2018');

New DOM:

$('.productsContent').prepend('November,2018');

New DOM

<div class="productsContent one-box"><span>November,2018</span>
          <div class="box">
            <h4> Loreum ipsum1</h4>
            <p> Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, 
               consectetur, adipisci velit... </p>
          </div>
        </div>

Example for .append() in jQuery

$('.productsContent').append('November,2018');

After the element is append, the HTML looks like,

<div class="productsContent one-box">
          <div class="box">
            <h4> Loreum ipsum1</h4>
            <p> Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, 
            consectetur, adipisci velit... >/p<
          </div>
          <span>November,2018</span>
        </div>

To insert new elements adjacent to every matched element, use:

• .after()
• .insertAfter()
• .before()
• .insertBefore()

Example for .after() in jQuery

$('.productsContent').after('November,2018');

To insert new elements around every matched element, use:

• .wrap()

$('.productsContent').wrap('.bg-grey');
    

Now, the productsContent class will be wrapped inside .bg-grey class.

<div class="bg-grey">
        <div class="productsContent one-box">
          <div class="box">
            <h4> Loreum ipsum1</h4>
            <p> Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, 
            consectetur, adipisci velit... >/p<
          </div>
          <span>November,2018</span>
        </div>
      </div> 

To replace every matched element with new elements(s) or text, use:

• .html()
• .text()

$('.productsContent p').html('We are learning jquery!');

Passing a span tag:

$('.productsContent p').html(We are learning JQuery DOM Manipulation');

To remove element(s) inside every matched element, use

• .empty()

$('.productsContent p').empty();

.empty() is applied to the paragraph tag inside .productsContent class. The result is,

<div class="productsContent one-box">
       <div class="box">
         <h4> Loreum ipsum1</h4>
         <p> </p>
       </div>
      </div>
    

How to resolve common jQuery errors?

The text inside the p tag is removed, and the tag remains as it is.

To remove every matched element in the DOM and descendants from the document without actually deleting them

• .remove()

$('.productsContent p').remove();

Unlike, empty() the remove() function removes the paragraph element itself.So the output looks like,

<div class="productsContent one-box">
           <div class="box">
             <h4> Loreum ipsum1</h4>
           </div>
       </div>
    

Other UI practice series:

UI practice exercise - Part 2

jQuery practice - DOM and array functions