Jquery element html code

Accessing Element Content with jQuery

Now that you know how to select HTML page elements in jQuery, you can start to do useful things with those elements. In this tutorial you’ll look at how to work with the contents of an element.

jQuery lets you work with HTML elements and element content in many different ways. For example, you can add new elements inside, around, before, or after existing elements; you can replace an element with another element (or elements); and you can read or change an element’s contents. Often the line between working with elements and element content is blurred — for example, when you add new elements inside an existing element, you’re effectively adding to that element’s contents.

You’ll look at adding, removing and replacing elements in a later tutorial. In this tutorial you’ll learn about 3 jQuery methods designed for working directly with the contents of an element:

• html() for reading and changing the HTML contents of an element
• text() for reading and changing the text contents of an element
• val() for reading and changing form field values

As you’ll see, these methods make it very easy to read or change the raw contents or value of any HTML element.

Working with HTML content: html()

jQuery’s html() method lets you read the HTML contents of an element as a string, or replace the element’s contents with a new HTML string.

Reading the HTML contents of an element

To retrieve an element’s HTML contents, first select the element as a jQuery object, then call the html() method on the object. For example, the following code selects the p (paragraph) element in the page, then calls html() to display the HTML contents of the element:

     

Replacing the HTML contents of an element
As well as reading the HTML contents of an element, you can replace an element’s contents with a new string of HTML markup. Here’s an example that replaces a paragraph inside a div element with a whole new heading and paragraph:
        
Here's a paragraph of text containing a link.
 
   
 
After running the above code, the page content changes to reflect the new markup, displaying the following:
 
If you call html( newHTML ) on a set of several selected elements then each element’s content is replaced with the string newHTML .
 
Using a function to replace the HTML contents of an element
 
Instead of passing a replacement string to html() , you can pass a callback function. The function should accept 2 arguments:
 
 
The index position of the current element in the set (starting from zero)
 
The old HTML contents of the current element
 
 
The return value of the function is then used as the replacement HTML.
 
This approach is handy if you want to replace the content of multiple elements based on their position or existing content (or both). Here’s an example that adds an item number to the start of each h2 heading in the page:
 
          
Here's a paragraph of text containing a link.
 
   
 
Here’s what the resulting page looks like. Notice that, this time, the , 
 
and tags are simply displayed in the page, rather than being used to create the heading, paragraph, and link:
 
 
A New Heading
Here's some new text containing another link.
 
 
Using a function to replace text content
 
As with html() , you can use a function with text() if you want to replace an element’s text content based on its position or its existing content. Here’s the earlier “numbered headings” example, modified to use text() instead of html() and using a '>' symbol for the separator instead of a dot:
 
       
First heading
 
Second heading
 
Third heading
   
 
This produces the following result:
 
 1 > First heading 2 > Second heading 3 > Third heading 
 
If you run the above code and view the HTML source, you’ll see that text() has encoded the '>' symbols as '>' .
 
Working with form field values: val()
 
The last method you’ll look at is val() . This behaves much like text() , except that it reads or changes the value of a form field, rather than the text contents of an element.
 
Here’s an example that shows how to both read and change form field values with val() :