Get html of div jquery

Get the HTML contents of the first element in the set of matched elements or set the HTML contents of every matched element.

Contents:

  • .html[]
    • .html[]
  • .html[ htmlString ]
    • .html[ htmlString ]
    • .html[ function ]

.html[]Returns: String

Description: Get the HTML contents of the first element in the set of matched elements.

  • version added: 1.0.html[]

    • This method does not accept any arguments.

This method is not available on XML documents.

In an HTML document, .html[] can be used to get the contents of any element. If the selector expression matches more than one element, only the first match will have its HTML content returned. Consider this code:

1

$[ "div.demo-container" ].html[];

In order for the following

's content to be retrieved, it would have to be the first one with class="demo-container" in the document:

1

2

3

Demonstration Box

The result would look like this:

1

Demonstration Box

This method uses the browser's innerHTML property. Some browsers may not return HTML that exactly replicates the HTML source in an original document. For example, Internet Explorer sometimes leaves off the quotes around attribute values if they contain only alphanumeric characters.

Additional Notes:

  • By design, any jQuery constructor or method that accepts an HTML string — jQuery[], .append[], .after[], etc. — can potentially execute code. This can occur by injection of script tags or use of HTML attributes that execute code [for example, ]. Do not use these methods to insert strings obtained from untrusted sources such as URL query parameters, cookies, or form inputs. Doing so can introduce cross-site-scripting [XSS] vulnerabilities. Remove or escape any user input before adding content to the document.

Example:

Click a paragraph to convert it from html to text.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

text-decoration: underline;

Click to change the html

to a text node.

This button does nothing.

$[ "p" ].click[function[] {

var htmlString = $[ this ].html[];

$[ this ].text[ htmlString ];

Demo:

.html[ htmlString ]Returns: jQuery

Description: Set the HTML contents of each element in the set of matched elements.

  • version added: 1.0.html[ htmlString ]

    • htmlString

      A string of HTML to set as the content of each matched element.

  • version added: 1.4.html[ function ]

    • function

      A function returning the HTML content to set. Receives the index position of the element in the set and the old HTML value as arguments. jQuery empties the element before calling the function; use the oldhtml argument to reference the previous content. Within the function, this refers to the current element in the set.

The .html[] method is not available in XML documents.

When .html[] is used to set an element's content, any content that was in that element is completely replaced by the new content. Additionally, jQuery removes other constructs such as data and event handlers from child elements before replacing those elements with the new content.

Consider the following HTML:

1

2

3

Demonstration Box

The content of

can be set like this:

1

2

$[ "div.demo-container" ]

.html[ "

All new content. You bet!

" ];

That line of code will replace everything inside

:

1

2

3

All new content. You bet!

As of jQuery 1.4, the .html[] method allows the HTML content to be set by passing in a function.

1

2

3

4

$[ "div.demo-container" ].html[function[] {

var emphasis = "" + $[ "p" ].length + " paragraphs!";

return "

All new content for " + emphasis + "

";

Given a document with six paragraphs, this example will set the HTML of

to

All new content for 6 paragraphs!

.

This method uses the browser's innerHTML property. Some browsers may not generate a DOM that exactly replicates the HTML source provided. For example, Internet Explorer prior to version 8 will convert all href properties on links to absolute URLs, and Internet Explorer prior to version 9 will not correctly handle HTML5 elements without the addition of a separate compatibility layer.

To set the content of a element, which does not contain HTML, use the .text[] method and not .html[].

Note: In Internet Explorer up to and including version 9, setting the text content of an HTML element may corrupt the text nodes of its children that are being removed from the document as a result of the operation. If you are keeping references to these DOM elements and need them to be unchanged, use .empty[].html[ string ] instead of .html[string] so that the elements are removed from the document before the new string is assigned to the element.

Examples:

Add some html to each div.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

$[ "div" ].html[ "Hello Again" ];

Demo:

Add some html to each div then immediately do further manipulations to the inserted html.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

$[ "div" ].html[ "Wow! Such excitement..." ];

.append[ document.createTextNode[ "!!!" ] ]

Demo:

How do I get all HTML elements in jQuery?

Get Content - text[], html[], and val[] Three simple, but useful, jQuery methods for DOM manipulation are: text[] - Sets or returns the text content of selected elements. html[] - Sets or returns the content of selected elements [including HTML markup]

How do I get text inside a div using jQuery?

To get the value of div content in jQuery, use the text[] method. The text[ ] method gets the combined text contents of all matched elements. This method works for both on XML and XHTML documents.

What is get [] in jQuery?

In jQuery . get[] method loads data from the server by using the GET HTTP request. This method returns XMLHttpRequest object. Syntax. $.get[ url, [data], [callback], [type] ]

What is innerHTML in jQuery?

Definition and Usage. The html[] method sets or returns the content [innerHTML] of the selected elements. When this method is used to return content, it returns the content of the FIRST matched element. When this method is used to set content, it overwrites the content of ALL matched elements.

Chủ Đề