• Jquery for Beginners – Manipulation of DOM Elements

    Posted on July 20, 2012 by in Jquery, Other Programming

    In the previous article, we have seen how to get/set and change attributes, classnames etc. In this Article, we will go through some more of the methods provided by JQuery to manipulate DOM Elements. We will be using the below HTML through the code

    <div id="menu">
    	<ul class="level-1">  
    		<li class="item-1">Top Level - Menu I</li>  
    		<li class="item-2">Top Level - Menu II  
    			<ul class="level-2">  
    				<li class="item-a">Sub Level - Menu A</li>  
    				<li class="item-b">Sub Level - Menu B  
    					<ul class="level-3">  
    						<li class="item-I"><span>Sub Level2 - Menu 1</span></li>  
    						<li class="item-II sublevel"><span>Sub Level2 - Menu 2</span></li>  
    						<li class="item-III sublevel"><span>Sub Level2 - Menu 3</span></li>  
    					</ul>  
    				</li>  
    				<li class="item-c">Sub Level - Menu C</li>  
    			</ul>  
    		</li>  
    		<li class="item-3">Top Level - Menu III</li>  
    	</ul> ​    
    </div>            
    
    

    Output of the above menu

    Jquery Manipulation

    append and appendTo

    .append() Inserts the DOM Elements or HTML string at the end of the element, i.e as the last child of an element. The .append() and .appendTo() methods perform the same task. The major difference is in the syntax. With .append(), the selector expression precedes the method and content is enclosed in parenthesis of the method. With .appendTo(), on the other hand, the content precedes the method and the selector is enclosed in parenthesis of the method. Syntax is given below

        //.append() syntax
        $(selector).append(content);
        //.appendTo() syntax
        content.appendTo(target);
    

    Given Below is an Example which adds a li element to level-2 of the menu. Both the statements below produce the same output, it is only the syntax that varies.

    //inserting a new li element at level 2 using append
    $("#menu ul.level-2").append('<li class="item-d selected">Sub Level - Menu D</li>');
    //inserting a new li element at level 2 using appendTo
    $('<li class="item-d selected">Sub Level - Menu D</li>').appendTo("#menu ul.level-2");
    

    Output of the using append or appendTo statements above

    As you have seen, .append inserts an element as the last child, if you want to insert element as first child, use .prepend().

    after and before

    As with with .append(), .after() and .before() insert elements into DOM but they give more control on where the element/text has to inserted. As the name suggets .after() inserts element/text after the matched elements, .before() inserts the elements before the matched elements

            //insert an element using after and insertAfter statement
    	$("#menu li.item-a").after('<li class="item-d selected">Sub Level - Menu D</li>');
    	$('<li class="item-d selected">Sub Level - Menu D</li>').insertAfter("#menu li.item-a");
            //insert an element using before and insertBeforestatement
    	$("#menu li.item-a").before('<li class="item-d selected">Sub Level - Menu D</li>');
    	$('<li class="item-d selected">Sub Level - Menu D</li>').insertBefore("#menu li.item-a");
    

    As with .append() and .appendTo(), the only difference in .after() and .insertAfter(), .before() and .insertBefore() is the syntax. The below is output generated when using .after() method.

    Jquery Manipulation - after

    replaceAll and replaceWith

    The .replaceWith() method replaces all matched elements with the specified HTML or DOM elements.

    	$("#menu li.item-a").replaceWith('<li class="item-d selected">Sub Level - Menu D</li>');
    	$('<li class="item-d selected">Sub Level - Menu D</li>').replaceAll('#menu li.item-a');
    

    The Code above replace the li with class item-a with a new HTML content provided. The difference with .replaceAll and .replaceWith is the syntax as you can see in the example above. Both the statements in the example given produce the same output as given below.

    Jquery Manipulation - replace

    wrap, wrapAll and wrapInner

    The .wrap() method wraps or encloses matched elements with a given HTML.

        $("#menu li.item-II span").wrap('<div style="border:3px solid green"></div>');
    

    The output of the above code

    To see the difference between between wrap,wrapAll, wrapInner , consider the below code

    <div class="container">
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
    </div>
    

    The output of using wrap would be

        //javascript syntax   
        $('.inner').wrap('<div class="new" />');
        // HTML output after using wrap
    	<div class="container">
    	  <div class="new">
    		<div class="inner">Hello</div>
    	  </div>
    	  <div class="new">
    		<div class="inner">Goodbye</div>
    	  </div>
    	</div>
    

    .wrapAll wraps around all the matched elements as single group, i.e if you have multiple divs with class inner, all of them are wrapped under one single group not individually as with wrap above. As seen in output below both Hello and Goodbye divs are wrapped under a single div.

        //javascript syntax   
        $('.inner').wrapAll('<div class="new" />');
        // HTML output after using wrapAll
    	<div class="container">
    	  <div class="new">
    		<div class="inner">Hello</div>
    		<div class="inner">Goodbye</div>
    	  </div>
    	</div>
    

    But be careful when using wrapAll, consider the below code

    <div class="container">
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
    </div>
    <div class="container2">
      <div class="inner">Hello2</div>
      <div class="inner">Goodbye2</div>
    </div>
    

    Now if we use .wrapAll as above, the output would be

        //javascript syntax   
        $('.inner').wrapAll('<div class="new" />');
        // HTML output after using wrapAll
    	<div class="container">
    	  <div class="new">
    		<div class="inner">Hello</div>
    		<div class="inner">Goodbye</div>
                    <div class="inner">Hello2</div>
                    <div class="inner">Goodbye2</div>
    	  </div>
    	</div>
            <div class="container2"></div>
    

    .wrapInner wraps the inner child contents of each element with specified DOM element/HTML string.

        //javascript syntax   
        $('.inner').wrapInner('<div class="new" />');
        // HTML output after using wrapInner
    	<div class="container">
    	  <div class="inner">
    		<div class="new">Hello</div>
    	  </div>
    	  <div class="inner">
    		<div class="new">Goodbye</div>
    	  </div>
    	</div>
    

    clone

    The .clone() method performs duplicates, makes an exact copy of matched element. .clone() is generally is used along with other insertion statements such as .appendTo like in example below.

    	$("#menu ul.level-3").clone().appendTo('#menu li.item-c');
    

    The above statement clones the submenus of level-3 and appends them to item-c, essentially making both of them to have the same elements as shown in image below.

    Jquery Manipulation - clone

    remove,empty and detach

    .remove() removes the element itself and everything inside it, including text and any childnodes. See the example below

        $('#menu li.item-b').remove();
    

    .empty() removes the everything under the matched element including text and childnodes but not the element itself.

        $('#menu li.item-b').empty();
    

    You can see the difference between both the statements in the images below

    Jquery Manipulation -remove

    Jquery Manipulation -empty

    .detach() works similar to .remove() but it keeps the removed content, This can be useful when removed elements are to be reinserted into the DOM at a later time.

        var li;   
        li = $('#menu li.item-b').detach();
    
    Be Sociable, Share!

    Written by

    Vanamali Juvvadi is a Web enthusiast and loves all things design and technology. Founded qnownow with a group of friends to share anything/everything they know/find on the internet.

    View all articles by

    Email : [email protected]

    Leave a Reply