Category Archives: Jquery

Jquery

.append() VS .html()

Leave a comment

.append() and .html() is the most usefull method in jQuery.But these are far different from one another,

.append() add some value with the existing one. whether .html() do the same but it removes the old value

HTML :

<ul id=”test”>
<li>test</li>
</ul>

Now use .append() to add one <li>,

<script type=”text/javascript>”
jQuery(“#test”).append(“<li>test1</li>”);
</script>

The output of this jQuery will be

<ul id=”test”>
<li>test</li>
<li>test1</li>
</ul>

Now if I use .html() to add one <li>, For that I will write

<script type=”text/javascript>”
jQuery(“#test”).html(“<li>test1</li>”);
</script>

The output of this Script will be

<ul id=”test”>
<li>test1</li>
</ul>

Here in this example .append() add one extra <li>, whether .html() removes the old one with new one.
This is the main difference between .append() and .html() in Jquery

Jquery

Query append() VS appendTo()

Leave a comment

Query append() and appendTo()

append() :  Append to end of the selected element

HTML :   <ul id=”test”>
<li>test</li>
</ul>
JQuery :   jQuery(“#test”).append(“<li>test1</li>”);

OUTPUT :  <ul id=”test”>
<li>test</li>
<li>test1</li>
</ul>
appendTo :  Append to end of the selected element

HTML :   <div>Hello</div>

JQuery :  $(‘<p>Test</p>’).appendTo(‘.inner’);

OUTPUT :  <div  class=”inner” > Hello
<p>Test</p>
</div>

Difference:
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.

//Create our content
var appendHTML = “<p>I’m going to be added to the DOM</p>”;

//Select our element, then add the html
$(“#container”).append(appendHTML);

//Create our content, then select the element to append to
$(appendHTML).appentTo(“#container”);

Jquery

JQuery Selector

Leave a comment

JQUERY SELECTORS :

1) selecting a particular element having a specific class

$(“.class1”).css(“border”, “1px solid red”);

2) select all elements of the page

$(“*”).css(“border”, “1px solid red”);

3) select an element that having a particular id

$(“#p1”).css(“border”, “1px solid red”);

4) select all specific elements type

$(“p”).css(“border”, “1px solid red”);

5) select multiple elements in a single selector

$(“div.class1, #div1”).css(“border”, “1px solid red”);

Note : From above the selector first select div having the class name with
            “.class1” and select element having id as “div1”  

 6) select a specific child of the parent element

$(“#div2 p:nth-child(2)”).css(“border”, “1px solid red”);

Note : select the 2nd paragraph (p) element that is inside the div
             element whose id is “div2” and apply the css on the element

7) select last child of the parent element

$(“#div2 p:last-child”).css(“border”, “1px solid red”);

8) select the first child of the parent element

$(“#div2 p:first-child”).css(“background”, “red”);

Note : select the first paragraph (p) element which is inside the
            div element whose id is “div2” and  apply the css on the element.

9) select an element based on its attribute

$(‘input[id$=”txtAddress”]’).val(‘Testing’);

Note : select the textboxes having id ending with “txtAddress” and set its value as “Testing”.