all
alt
ch
dir
id
min
rel
top
url
URL
urn
Expand Minimize

innerHTML property

Sets or retrieves the HTML between the start and end tags of the object.

Syntax

JavaScript

p = object.innerHTML

Property values

Type: String

the content between the start and end tags.

Remarks

The innerHTML property is valid for both block and inline elements. By definition, elements that do not have both an opening and closing tag cannot have an innerHTML property.

The innerHTML property takes a string that specifies a valid combination of text and elements. When the innerHTML property is set, the given string completely replaces the existing content of the object. If the string contains HTML tags, the string is parsed and formatted as it is placed into the document.

This property is accessible at run time as the document is being parsed; however, removing elements at run time, before the document is fully loaded, could prevent other areas of the document from rendering.

When using innerHTML to insert script, you must include the defer attribute in the script element.

You can change the value of the title element using the document.title property.

To change the contents of the table, tFoot, tHead, and tr elements, use the table object model described in Building Tables Dynamically. However, to change the content of a particular cell, you can use innerHTML.

Examples

The following example demonstrates how to convert the HTML source to text using a temporary div element and createTextNode. Once the HTML is sanitized, it can be safely inserted into the document using innerHTML.


<!DOCTYPE html>
<html>

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>View HTML Source</title>
</head>

<body>
  <h1>View HTML Source</h1>
  <p>The document content is converted to text using CreateTextNode, and safely 
  displayed below as preformatted HTML as well as raw text.</p>
     
  <h2>As HTML</h2>
  <div id="asHTML"></div>
  
  <h2>As Text</h2>
  <div id="asText"></div>
     
  <p><strong>[To view the source code for this page, right-click and choose View Source.]</strong></p>
  <script>
    var h = sanitizeHTML(document.documentElement.outerHTML);
    document.getElementById('asHTML').innerHTML = "<pre>" + h + "</pre>";
    document.getElementById('asText').innerText = h;

    function sanitizeHTML(s) {
      var d = document.createElement('div');
      d.appendChild(document.createTextNode(s));
      return d.innerHTML;
    }
  </script>
</body>

</html>


See also

a
abbr
acronym
address
applet
area
article
aside
b
bdo
big
blockQuote
body
br
button
caption
center
cite
code
col
colGroup
custom
dd
del
dfn
dir
div
dl
dt
em
embed
fieldSet
figcaption
figure
font
footer
form
frame
frameSet
head
header
hgroup
hn
hr
html
i
iframe
img
input type=button
input type=checkbox
input type=email
input type=file
input type=hidden
input type=image
input type=number
input type=password
input type=radio
input type=range
input type=reset
input type=search
input type=submit
input type=tel
input type=text
input type=url
ins
isIndex
kbd
label
legend
li
listing
map
mark
marquee
menu
nav
nextID
noBR
object
ol
optGroup
option
p
plainText
pre
q
rt
ruby
s
samp
section
select
small
span
strike
strong
sub
sup
table
tBody
td
textArea
tFoot
th
tHead
tr
tt
u
ul
var
xmp
Reference
insertAdjacentHTML
Conceptual
Building Tables Dynamically

 

 

Show:
© 2014 Microsoft