---
title: "JQuery - DOM Manipulation Method"  
description: "In this article I am going to explain jQuery – DOM (Document Object Model) Manipulation Method."  
author: "Vijay Shukla"  
published: 2012-12-29  
updated: 2019-11-25  
canonical: https://www.mindstick.com/articles/1096/jquery-dom-manipulation-method  
category: "jquery"  
tags: ["jquery"]  
reading_time: 2 minutes  

---

# JQuery - DOM Manipulation Method

In this article I am going to explain jQuery – DOM ([Document](https://www.mindstick.com/articles/328642/what-to-consider-while-choosing-a-software-documentation-tool) [Object Model](https://www.mindstick.com/forum/158432/what-is-the-document-object-model-dom-and-how-does-it-relate-to-web-development)) [Manipulation](https://www.mindstick.com/forum/34588/list-manipulation) Method.\

JQuery provides methods to control DOM in well-[organized](https://yourviews.mindstick.com/story/4668/regions-rivers-where-kumbha-mela-is-organized) way. You don’t require write huge code to change the value of any element's [attribute](https://www.mindstick.com/blog/61/ado-dot-net-object-model-and-attributes) 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](https://www.mindstick.com/forum/1440/wpf-button-with-multiple-text-elements) for later use.

##### .attr():

This method sets or returns [attributes](https://www.mindstick.com/articles/13105/2-attributes-that-make-your-odoo-ecommerce-theme-productive-and-engaging) 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](https://www.mindstick.com/mindstickarticle/f34b180d-0d1e-4aee-b901-57dc8f2683f8/images/dc5c07cb-dce5-4390-a1a0-84575028bacb.png)

Above output when code load first time on the browser the table width is 100 pixel but after pressing Click to [increase](https://yourviews.mindstick.com/view/81392/why-sudden-increase-in-corona-cases-for-india) 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](https://www.mindstick.com/mindstickarticle/f34b180d-0d1e-4aee-b901-57dc8f2683f8/images/a67a6166-0ee3-41f3-917d-2267ceb8cb4c.png)

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

##### .val():

This [method returns](https://www.mindstick.com/forum/12904/main-method-returns-if-submethod-has-stoped-by-return-in-c-sharp) 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](https://www.mindstick.com/mindstickarticle/f34b180d-0d1e-4aee-b901-57dc8f2683f8/images/f8ed8872-f1fa-4b0e-a3f7-bb44fdc4f47f.png)

Above output will come when I will click on the [Mindstick](https://yourviews.mindstick.com/story/1230/top-beneficial-service-pages-of-mindstick-company) button the textbox will set the value is Mindstick and when press India or U.S.A the text set vice versa.

---

Original Source: https://www.mindstick.com/articles/1096/jquery-dom-manipulation-method

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.