jQuery html() Method

jQuery html()

The html() method can be used to provide the content of any element in an HTML document. If the match expression meets more than one element, its HTML content is returned only to the first match. This jQuery html method takes advantage of the innerHTML property of the browser. Several browsers might not return HTML, which simulates the exact source of HTML in an actual document.

Web development, programming languages, Software testing & others

Some jQuery constructor or method which acknowledges an HTML string can effectively execute script through code. It can happen by inserting script identifiers or using code implementing HTML attributes. Don’t use such mechanisms to inject strings collected from untrusted sources such as parameters for the URL query, cookies or inputs for the form. By doing so, this can incorporate vulnerabilities by cross-site scripting (XSS). Delete or escape input from any user prior to adding content to document

Syntax

1. It generates the first matched item content s shown below:

2. It provides matched element content, as shown below:

3. The content is set using a function, as shown below:

$(selector).html(function(index, currentcontent))

Parameters in jQuery html()

This method takes two parameters, as mentioned above:

1. Content: This is the mandatory element that defines the new content for the chosen elements.

2. Function(index, currentcontent): This is an optional parameter that defines a function that returns the specified elements’ new content.

• Index: The index position of the element inside the set is returned.
• currentcontent: The current HTML content of the selected element is returned.

Working of jQuery html()

The html() method works with the above three parameters based on the criteria. The method html () selects or returns the content or innerHTML of the elements chosen. While using this method to return content, it provides the first matched element content. Whenever this process is used for setting content, the content of all matched elements is overwritten.

Examples to Implement jQuery html()

Below is the example of implementing in jQuery html() methods:

Example #1

        
html () example
 Click here..   

• Save the above file with a .html extension and run it in the web browser. It will display the screen, as shown below:

• Click on the button shown in the result. When you click on the button, it will give the below result:

Example #2

        
html () example
 Click here.   

Example #3

        
html () example
 Click here.   

Example #4

     .color2 < color:blue; >.color1  
html () example
 
First data.
 
Second data.
  

• When you run the above example, you would get the content of the first-line, and it will get the display in the second line:

Example #5

     .txt < margin: 10px; font-size: 15px; color: red; cursor: pointer; >.txt1    Click on this here to change the html to text.   

Example #6

      .txt Hello World .   

Example #7

      div      

Example #8

      .div 
Click on the given boxes to see the respective box number:
 
This is simple text .
 
 
This is first box .
 
 
 
This is second box .
 
 
 
This is third box .
 
  

Conclusion

So far, we have studied about html () method in jQuery. While using the HTML (,) method to determine an element’s content, any content stored in that element will be entirely replaced by new content. Moreover, jQuery eliminates other constructs from child elements, including data and event handlers, before exchanging such elements with the new content. This method basically uses the innerHTML property of JavaScript. The internalHTML property sets and gets the matched element of the HTML content.

Recommended Articles

This is a guide to jQuery html(). Here we discuss Syntax, methods, parameters, and examples to implement jQuery html() with proper codes and outputs. You can also go through our other related articles to learn more –

Источник

jQuery – title attribute

To manipulate the title attribute, you can use the standard attr() method. Using this method, you can read the current value of the title attribute, or you can write a new value.

Read title attribute

Transfer this code to the browser and check that everything works correctly. The resulting code should be:

In order to consolidate the material, I propose to add another element with the title, read it and display it on the screen.

Writing attribute title

Writing to the title attribute is as simple as reading the value. In the attr() method, not one argument will be used, but two. The first argument is the attribute, and the second is the attribute.

As a result of the implementation we get:

Now on working with the title attribute you are a Guru!

Источник

jQuery — DOM Manipulation

jQuery provides a number of methods to manipulate DOM in efficient way. You do not need to write big and complex code to set or get the content of any HTML element.

jQuery DOM Manipulation

jQuery provides methods such as attr(), html(), text() and val() which act as getters and setters to manipulate the content from HTML documents.

Document Object Model (DOM) — is a W3C (World Wide Web Consortium) standard that allows us to create, change, or remove elements from the HTML or XML documents.

Here are some basic operations which you can perform on DOM elements with the help of jQuery standard library methods −

• Extract the content of an element
• Change the content of an element
• Adding a child element under an existing element
• Adding a parent element above an existing element
• Adding an element before or after an existing element
• Replace an existing element with another element
• Delete an existing element
• Wrapping content with-in an element

We have already covered attr() method while discussing jQuery Attributes and remaining DOM content manipulation methods html(), text() and val() will be discussed in this chapter.

jQuery — Get Content

jQuery provides html() and text() methods to extract the content of the matched HTML element. Following is the syntax of these two methods:

$(selector).html(); $(selector).text();

The jQuery text() method returns plain text value of the content where as html() returns the content with HTML tags. You will need to use jQuery selectors to select the target element.

Example

Following example shows how to get the content with the jQuery text() and html() methods:

       
The quick brown fox jumps over the lazy dog
 Get Text Get HTML   

Get Form Fields

jQuery val() method is used to get the value from any form field. Following is simple syntax of this method.

Example

Following is another example to show how to get the value an input field with jQuery method val() −

       
Name: 
 
Class: 
 Get Name Get Class   

jQuery — Set Content

jQuery html() and text() methods can be used to set the content of the matched HTML element. Following is the syntax of these two methods when they are used to set the values:

$(selector).html(val, [function]); $(selector).text(val, [function]);

Here val is he HTML of text content to be set for the element. We can provide an optional callback function to these methods which will be called when the value of the element will be set.

The jQuery text() method sets plain text value of the content where as html() method sets the content with HTML tags.

Example

Following example shows how to set the content of an element with the jQuery text() and html() methods:

       
Click on any of the two buttons to see the result
 Set Text Set HTML   

Set Form Fields

jQuery val() method is also used to set the value from any form field. Following is simple syntax of this method when it is used to set the value.

Here val is he value to be set for the input field. We can provide an optional callback function which will be called when the value of the field will be set.

Example

Following is another example to show how to set the value an input field with jQuery method val() −

       
Name: 
 
Class: 
 Set Name Set Class   

jQuery — Replacement Elements

The jQuery replaceWith() method can be used to replace a complete DOM element with another HTML or DOM element. Following is the syntax of the method:

$(selector).replaceWith(val);

Here val is what you want to have instead of original element. This could be HTML or simple text.

Example

Following is an example where we will replace a

element with an element and then further we replace element with element.

       
Click below button to replace me
 Replace Paragraph Replace Heading   

jQuery HTML/CSS Reference

You can get a complete reference of all the jQuery Methods to manipulate CSS and HTML content at the following page: jQuery CSS/HTML Reference.

Источник