Getting HTML code of an element

**BNArun** · 01-09-2008, 12:54 PM

How can I get complete HTML code of an element from JavaScript?

I'm sending id of a div element to a JavaScript function. And I'm getting it's DOM equalant using document.getElementById(<the div tag id>).

I want to get HTML code of that element. If I use innerHTML, i will get inner HTML i.e., it doesn't contain that <div> tag whose id is passed. Instead it gives us code within that <div> tag. How can I get complete HTML of that element?

Thanks in advance.

**jscheuer1** · 01-09-2008, 04:18 PM

See:

http://www.dynamicdrive.com/forums/s...ad.php?t=13005

which arose from (also of interest):

http://www.dynamicdrive.com/forums/s...ad.php?t=12803

**Twey** · 01-09-2008, 05:33 PM

If you're doing this, however, there's probably something wrong with the design of your script: the DOM should never be represented as a string. Why do you want to do it?

**jscheuer1** · 01-09-2008, 05:47 PM

It can be a handy tool in crafting a script. But Twey is otherwise correct. There is almost always an easier and more standard way to do things than to resort to what is basically outerHTML (supported most fully only in IE).

**BNArun** · 01-10-2008, 05:51 AM

Leave DOM and all these. I want to get complete HTML code of a <div> element. If I use innerHTML,
I will get HTML code inside that tag. I want code including that tag.

What should I have to do?

**BNArun** · 01-10-2008, 07:19 AM

Originally Posted by BNArun

Leave DOM and all these. I want to get complete HTML code of a <div> element. If I use innerHTML,
I will get HTML code inside that tag. I want code including that tag.

What should I have to do?

I used outerHTML. It worked fine in IE7. But it is not working in FF2.

**jscheuer1** · 01-10-2008, 11:51 AM

As noted earlier, outerHTML is only most fully supported in IE. Have a look at this:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var hh='';
function outerH(el){
if(typeof el.outerHTML=='string'&&el.outerHTML.length)
return el.outerHTML;
var tmp=document.createElement('div');
tmp.appendChild(el.cloneNode(true));
setTimeout(function(){tmp=null;},200);
return tmp.innerHTML;
}
</script>
</head>
<body>
<div style="color:black;background-color:yellow;" onmouseover="alert(outerH(this));">Howdy World!</div>
<span id="test">Wazzup?<br></span>
<input type="button" onclick="hh=outerH(document.getElementById('test'));" value="Set"><br>
<input type="button" onclick="alert(hh);" value="Read">
</body>
</html>

Notes: There is probably another way of doing whatever your ultimate goal is, one that avoids this, which is pretty non-standard regardless of which method a browser may support because no future browser will ever be required to support either, and I believe that some current browsers will not support either if your page is served as (otherwise) valid XHTML.

**Twey** · 01-10-2008, 04:48 PM

I want to get complete HTML code of a <div> element.

You shouldn't want to do this. That you are attempting it means that your design is poor.

Thread: Getting HTML code of an element

Thread Tools

Search Thread

Getting HTML code of an element

Bookmarks

Bookmarks

Posting Permissions