close

Trucks

Get the HTML contents of the first element in the set of matched elements or set the HTML contents of every matched element.
Contents:
<div class="demo-container"> <div class="demo-box">Demonstration Box
The content of <div class="demo-container"> can be set like this: 1 2 $( "div.demo-container" ) .html( " All new content. <em>You bet!</em>" ); That line of code will replace everything inside <div class="demo-container">: 1 2 3<div class="demo-container">

All new content. <em>You bet!</em>

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 = "<em>" $( "p" ).length " paragraphs!</em>";return " All new content for " emphasis ""; }); Given a document with six paragraphs, this example will set the HTML of <div class="demo-container"> to All new content for <em>6 paragraphs!</em>. 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 . To set the content of a <script> element, which does not contain HTML, use the 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 <!doctype html> <html lang="en"> <meta charset="utf-8"> <title>html demo</title> <style> .red { color: red;} </style> <script src=" Hello
<script> $( "div" ).html( "<span class='red'>Hello <b>Again</b>" );</script> 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 <!doctype html> <html lang="en"> <meta charset="utf-8"> <title>html demo</title> <style> div { color: blue; font-size: 18px;} </style> <script src="
<script> $( "div" ).html( "<b>Wow!</b> Such excitement..." ); $( "div b" ).append( document.createTextNode( "!!!" ) ) .css( "color", "red" ); </script> Demo:

Previous     Next


TAGS


CATEGORIES

.