jquery manipulation

Both jQuery append() and appendTo() methods are doing the same task, add a text or html content after the content of the matched elements. The major difference is in the syntax. For example, <div class="box">I’m a big box</div> <div class="box">I’m a big box 2</div> 1. $(‘selector’).append(‘new text’); $(‘.box’).append("<div class=’newbox’>I’m new box by prepend</div>"); 2. $(‘new …

Read more

jQuery text() is used to get the contents of all the matched elements; While text(‘new text’) is used to replace or set the text contents of all the matched elements. For example, <div class="TClass">TEXT 1</div> <div class="Tlass">TEXT 2</div> 1. $(‘.TClass’).text() This will combine all the contents of the matched elements, get “TEXT 1 TEXT 2” …

Read more

jQuery wrap() is used to wrap HTML element around each of the matched elements. For example, <div class="innerBox">Ip man vs Iron man</div> <div class="innerBox">Ip man 2 vs Iron man 2</div> Wrap it with a div tag that contains a class name of ‘wrapBox’. $(‘.innerBox’).wrap("<div class=’wrapBox’></div>"); The new contents will become : <div class=’wrapBox’> <div class="innerBox">Ip …

Read more

Both jQuery prepend() and prependTo() methods are doing the same task, add a text or html content before the content of the matched elements. The major difference is in the syntax. For example, <div class="box">I’m a big box</div> <div class="box">I’m a big box 2</div> 1. $(‘selector’).prepend(‘new text’); $(‘.box’).prepend("<div class=’newbox’>I’m new box by prepend</div>"); 2. $(‘new …

Read more

The toggleClass() method means if matched elements do not have the class name, then add it; if matched elements already have the class name, then remove it. Let see an example, a simple ‘p’ tag. <p>This is paragraph</p> Call $(‘p’).toggleClass(‘highlight’), it will add a highlight class to the ‘p’ tag. <p class="highlight">This is paragraph</p> Call …

Read more

jQuery html() is used to get the html contents of the first element of the matched elements; While html(‘new html content’) is used to replace or set the html contents of all the matched elements. For example, two div elements that contains same class name “AClass”. <div class="AClass">ABC 1</div> <div class="AClass">ABC 2</div> 1. $(‘.AClass’).html() This …

Read more

Both jQuery empty() and remove() are used to remove the matched elements, just the former is used to remove the child of the matched elements; while the latter is used to remove all the matched elements totally. Example 2 div tags – “BBox” is a child element to “ABox”. <div class="ABox"> I’m a A box …

Read more

jQuery clone() is used to create a copy of the matched elements. It also support a boolean parameter to indicate whether need to copy the event handlers and data along with the matched elements. 1. Clone the html elements For example, you are going to clone the following html code. <div class="smallBox"> I’m a small …

Read more

Both jQuery before() and insertBefore() methods are doing the same task, add a text or html content before the matched elements. The major difference is in the syntax. For example, <div class="prettyBox">I’m a ipman</div> <div class="prettyBox">I’m a ipman 2</div> 1. $(‘selector’).before(‘new content’); $(‘.prettyBox’).before("<div class=’newPrettybox’>Iron man</div>"); 2. $(‘new content’).insertBefore(‘selector’); $("<div class=’newPrettybox’>Iron man</div>").insertBefore(‘.prettyBox’); Result Both methods above …

Read more