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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
|
<!DOCTYPE html>
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
<div class="entry-content">
<div class="entry-title roundTop">
<h1 class="jq-clearfix">.html()</h1>
<div class="entry-meta jq-clearfix">
Categories:
<span class="category"><a href="http://api.jquery.com/category/attributes/" title="View all posts in Attributes">Attributes</a></span> | <span class="category"><a href="http://api.jquery.com/category/manipulation/" title="View all posts in Manipulation">Manipulation</a> > <a href="http://api.jquery.com/category/manipulation/dom-insertion-inside/" title="View all posts in DOM Insertion, Inside">DOM Insertion, Inside</a></span>
</div>
</div>
<div class="toc">
<h4><span>Contents:</span></h4>
<ul class="toc-list">
<li>
<a href="#html1">html() </a><ul><li>.html()
</li></ul>
</li>
<li>
<a href="#html2">html( htmlString ) </a><ul>
<li>.html( htmlString )
</li>
<li>.html( function(index, oldhtml) )
</li>
</ul>
</li>
</ul>
</div>
<div id="html1" class="entry method">
<h2 class="jq-clearfix roundTop section-title">
<span class="name">.html()</span> <span class="returns">Returns: <a class="return" href="http://api.jquery.com/Types/#String">String</a></span>
</h2>
<div class="jq-box roundBottom entry-details">
<p class="desc"><strong>Description: </strong>Get the HTML contents of the first element in the set of matched elements.</p>
<ul class="signatures"><li class="signature" id="html"><h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.html()</h4></li></ul>
<div class="longdesc">
<p>This method is not available on XML documents.</p>
<p>In an HTML document, <code>.html()</code> 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:</p>
<pre>$('div.demo-container').html();</pre>
<p>In order for the following <code><div></code>'s content to be retrieved, it would have to be the first one with <code>class="demo-container"</code> in the document:</p>
<pre><div class="demo-container">
<div class="demo-box">Demonstration Box</div>
</div></pre>
<p>The result would look like this:</p>
<pre><div class="demo-box">Demonstration Box</div></pre>
<p>This method uses the browser's <code>innerHTML</code> 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.</p>
</div>
<h3>Example:</h3>
<div class="entry-examples" id="entry-examples"><div id="example-0">
<h4><span class="desc">Click a paragraph to convert it from html to text.</span></h4>
<pre class="prettyprint"><code class="example demo-code"><!DOCTYPE html>
<html>
<head>
<style>
p { margin:8px; font-size:20px; color:blue;
cursor:pointer; }
b { text-decoration:underline; }
button { cursor:pointer; }
</style>
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
</head>
<body>
<p>
<b>Click</b> to change the <span id="tag">html</span>
</p>
<p>
to a <span id="text">text</span> node.
</p>
<p>
This <button name="nada">button</button> does nothing.
</p>
<script>
$("p").click(function () {
var htmlStr = $(this).html();
$(this).text(htmlStr);
});
</script>
</body>
</html></code></pre>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div></div>
</div>
</div>
<div id="html2" class="entry method">
<h2 class="jq-clearfix roundTop section-title">
<span class="name">.html( htmlString )</span> <span class="returns">Returns: <a class="return" href="http://api.jquery.com/Types/#jQuery">jQuery</a></span>
</h2>
<div class="jq-box roundBottom entry-details">
<p class="desc"><strong>Description: </strong>Set the HTML contents of each element in the set of matched elements.</p>
<ul class="signatures">
<li class="signature" id="html-htmlString">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.html( htmlString )</h4>
<p class="arguement"><strong>htmlString</strong>A string of HTML to set as the content of each matched element.</p>
</li>
<li class="signature" id="html-functionindex- oldhtml">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.4/">1.4</a></span>.html( function(index, oldhtml) )</h4>
<p class="arguement"><strong>function(index, oldhtml)</strong>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, <code>this</code> refers to the current element in the set.</p>
</li>
</ul>
<div class="longdesc">
<p>The <code>.html()</code> method is not available in XML documents. </p>
<p>When <code>.html()</code> is used to set an element's content, any content that was in that element is completely replaced by the new content. Consider the following HTML:</p>
<pre><div class="demo-container">
<div class="demo-box">Demonstration Box</div>
</div></pre>
<p>The content of <code><div class="demo-container"></code> can be set like this:</p>
<pre>$('div.demo-container')
.html('<p>All new content. <em>You bet!</em></p>');</pre>
<p>That line of code will replace everything inside <code><div class="demo-container"></code>:</p>
<pre><div class="demo-container">
<p>All new content. <em>You bet!</em></p>
</div></pre>
<p>As of jQuery 1.4, the <code>.html()</code> method allows the HTML content to be set by passing in a function.</p>
<pre>$('div.demo-container').html(function() {
var emph = '<em>' + $('p').length + ' paragraphs!</em>';
return '<p>All new content for ' + emph + '</p>';
});</pre>
<p>Given a document with six paragraphs, this example will set the HTML of <code><div class="demo-container"></code> to <code><p>All new content for <em>6 paragraphs!</em></p></code>.</p>
<p>This method uses the browser's <code>innerHTML</code> 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 <code>href</code> 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 <a href="http://code.google.com/p/html5shiv/">compatibility layer</a>.</p>
</div>
<h3>Examples:</h3>
<div class="entry-examples" id="entry-examples-1">
<div id="example-1-0">
<h4>Example: <span class="desc">Add some html to each div.</span>
</h4>
<pre class="prettyprint"><code class="example demo-code"><!DOCTYPE html>
<html>
<head>
<style>
.red { color:red; }
</style>
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
</head>
<body>
<span>Hello</span>
<div></div>
<div></div>
<div></div>
<script>$("div").html("<span class='red'>Hello <b>Again</b></span>");</script>
</body>
</html></code></pre>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div id="example-1-1">
<h4>Example: <span class="desc">Add some html to each div then immediately do further manipulations to the inserted html.</span>
</h4>
<pre class="prettyprint"><code class="example demo-code"><!DOCTYPE html>
<html>
<head>
<style>
div { color:blue; font-size:18px; }
</style>
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<script>
$("div").html("<b>Wow!</b> Such excitement...");
$("div b").append(document.createTextNode("!!!"))
.css("color", "red");
</script>
</body>
</html></code></pre>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
</div>
</div>
</div>
</div>
</body></html>
|
