PDA

View Full Version : 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/showthread.php?t=13005

which arose from (also of interest):

http://www.dynamicdrive.com/forums/showthread.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
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:


<!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.