Home > DeveloperSection > Articles > JQuery - DOM Manipulation Method

JQuery - DOM Manipulation Method


JQuery JQuery 
Ratings:
0 Comment(s)
 2681  View(s)
Rate this:

JQuery - DOM Manipulation Method

In this article I am going to explain jQuery – DOM (Document Object Model) Manipulation Method.

JQuery provides methods to control DOM in well-organized way. You don’t require write huge code to change the value of any element's attribute or to quotation HTML code from a paragraph or division (div).it’s  provides methods such as .attr(), .html(), and .val() which act as receiver, retrieving information from DOM elements for later use.

.attr():

This method sets or returns attributes and values of the selected elements.

Script:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("table").attr("width","200");

    $("td").attr("align","center");

  });

});

</script>

HTML Code:

<table width="100px" border="1px solid">

<tr>

<td>Mindstick India</td>

</tr>

<tr>

<td>Mindstick U.S.A</td>

</tr>

</table>

<br>

<button>Click to Increase the table width</button>

Output:

JQuery - DOM Manipulation Method

Above output when code load first time on the browser the table width is 100 pixel but after pressing Click to increase the table width button the  table width increase in 200pixel and set text alignment is center..

 

.html():

This method sets or returns the content (innerHTML) of the selected elements.

Script:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("p").html("Welcome to <b>mindstick!</b> <i>India</i>");

    $("div").html("Welcome to <b>mindstick!</b> <i>U.S.A</i>");

    $("Button").html("Clicked!");  });

});

</script>

HTML Code:

<button>Click Me!</button>

<p>Mindstick</p>

<div>Mindstick</div>

Output:

JQuery - DOM Manipulation Method

Above output when after clicking on the Click Me! Button the second image will display in the screen.

.val():

This method returns or sets the value attribute of the selected elements.

Script:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    var text = $(this).text();

    $("input").val(text);

  });

});

</script>

 

HTML Code:

<p>Name: <input type="text" name="Textbox"></p>

<button>Mindstick</button>

<button>India</button>

<button>U.S.A</button>

Output:

JQuery - DOM Manipulation Method

Above output will come when I will click on the Mindstick button the textbox will set the value is Mindstick and when press India or U.S.A the text set vice versa.


Don't want to miss updates? Please click the below button!

Follow MindStick