Export (0) Print
Expand All
all
alt
ch
dir
id
min
rel
top
url
URL
urn
Expand Minimize
6 out of 31 rated this helpful - Rate this topic

outerHTML property

Sets or retrieves the object and its content in HTML.

Syntax

JavaScript

text = object.outerHTML

Property values

Type: String

content and HTML tags.

Remarks

The outerHTML property is read-only on the caption, col, colGroup, html, head, body, frameSet, tBody, td, tFoot, th, tHead, and tr objects.

The property can be any valid string containing a combination of text and tags.

When the property is set, the given string completely replaces the object, including its start and end tags. If the string contains HTML tags, the string is parsed and formatted as it is placed into the document.

You can set this property only after the onload event fires on the window. When dynamically creating a tag using TextRange, innerHTML, or outerHTML, use JavaScript to create new events to handle the newly formed tags.

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. For example, use the rowIndex property or the rows collection to retrieve a reference to a specific table row. You can add or delete rows using the insertRow and deleteRow methods. To retrieve a reference to a specific cell, use the cellIndex property or the cells collection. You can add or delete rows using the insertCell and deleteCell methods. To change the content of a particular cell, use the innerHTML property. This property is accessible at run time. Removing elements at run time, before the closing tag has been parsed, can prevent other areas of the document from rendering.

Examples

This example uses the outerHTML property to copy an object, accompanying attributes, and children to a list when a user clicks one of the objects.


<!DOCTYPE html>
<html>

<head>
  <title>Fonts</title>
</head>

<body>
  <ul id="ulList">
    <li><strong>Bold text</strong></li>
    <li><em>Italic text</em></li>
    <li><u>Underlined text</u></li>
    <li><strike>Strikeout text</strike></li> <!-- <strike> not supported in HTML5 -->
  </ul>
  <div id="oScratch"></div>
  <script>
    document.getElementById('ulList').addEventListener('click', fnCopyHTML, false);

    function fnCopyHTML(evt) {
      var oWorkItem = evt.target;
      if ((oWorkItem.tagName != "ul") && (oWorkItem.tagName != "li")) {
        alert("Adding " + oWorkItem.outerHTML + " to the list.");
        oScratch.innerHTML += oWorkItem.outerHTML + "<br />";
      }
    }
  </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
insertAdjacentHTML

 

 

Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback
Show:
© 2014 Microsoft. All rights reserved.