How to get outerHTML in IE and Mozilla (Netscape)

I would like to know how to get the outer HTML of a element. Code must work in NN, Moz and IE.

here is what i have so far:

var myEl = document.getElementById("myDiv"); // myDiv is "< div >hello world < / div >"
alert("innerHTML:\n"+ myEl.innerHTML); // returns "hello world"
alert("outerHTML:\n"); // should return < div >hello world< / div > 


OT:<b>do tags get interprited in this thing? i am putting b tags around this question...</b>
omicronpersei8Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

archrajanCommented:
document.getElementById('mydiv').innerHTML

AND
document.getElementById('mydiv').outerHTML

0
GwynforWebCommented:
outerHTML is IE only
0
archrajanCommented:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script>
function alert1()
{

}
</script>
</HEAD>

<BODY onload ="alert(document.getElementById('mydiv').innerHTML);alert(document.getElementById('mydiv').outerHTML)">
<div id = "mydiv">
THIS IS MY DIV
</div>

</BODY>
</HTML>
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

archrajanCommented:
outerHTML returns undefined in firefox!!
0
StormyWatersCommented:
0
devicCommented:
omicronpersei8, increase points to 500 and I will show howto.

my code that I wrote in 5 min, tested on:
IE 6.0
mozilla 1.6
firefox 1
netscape 7.1
opera 7.54
0
omicronpersei8Author Commented:
let me clarify. it needs to work with nn7, ff1 and ie6. i don't care about older browsers. the solution you (stormywaters) provided looks like it will work but the article is somewhat old because moz has innerHTML. so i'd have to rewrite it to make it work with current browsers. i'm not sure i want to do that unless there isn't any other solutions.
0
omicronpersei8Author Commented:
devic, if you post your code and it works then i will increase it by 100. if i can also set the outer html then i'll put it up to 500.
0
devicCommented:
>>>if you post your code and it works then
it works and costs 500 ;)

to set innerHTML is another 500 question.
as you see none can provide an example, even google doesn't help ;)
0
archrajanCommented:
TRY THIS
<HTML>
<HEAD>
<STYLE>

</STYLE>
<SCRIPT LANGUAGE="JavaScript1.5">
var emptyElements = {
  HR: true, BR: true, IMG: true, INPUT: true
};
var specialElements = {
  TEXTAREA: true
};
HTMLElement.prototype.outerHTML getter = function () {
  return getOuterHTML (this);
}
function getOuterHTML (node) {
  var html = '';
  switch (node.nodeType) {
    case Node.ELEMENT_NODE:
      html += '<';
      html += node.nodeName;
      if (!specialElements[node.nodeName]) {
        for (var a = 0; a < node.attributes.length; a++)
          html += ' ' + node.attributes[a].nodeName.toUpperCase() +
                  '="' + node.attributes[a].nodeValue + '"';
        html += '>';
        if (!emptyElements[node.nodeName]) {
          html += node.innerHTML;
          html += '<\/' + node.nodeName + '>';
        }
      }
      else switch (node.nodeName) {
        case 'TEXTAREA':
          for (var a = 0; a < node.attributes.length; a++)
            if (node.attributes[a].nodeName.toLowerCase() != 'value')
              html += ' ' + node.attributes[a].nodeName.toUpperCase() +
                      '="' + node.attributes[a].nodeValue + '"';
            else
              var content = node.attributes[a].nodeValue;
          html += '>';
          html += content;
          html += '<\/' + node.nodeName + '>';
          break;
      }
      break;
    case Node.TEXT_NODE:
      html += node.nodeValue;
      break;
    case Node.COMMENT_NODE:
      html += '<!' + '--' + node.nodeValue + '--' + '>';
      break;
  }
  return html;
}

</SCRIPT>
</HEAD>
<BODY>
<A HREF="javascript: alert(document.documentElement.outerHTML); void 0">
show document.documentElement.outerHTML
</A>
|
<A HREF="javascript: alert(document.body.outerHTML); void 0">
show document.body.outerHTML
</A>
|
<A HREF="javascript: alert(document.documentElement.innerHTML); void 0">
show document.documentElement.innerHTML
</A>
|
<A HREF="javascript: alert(document.body.innerHTML); void 0">
show document.body.innerHTML
</A>
<FORM NAME="formName">
<TEXTAREA NAME="aTextArea" ROWS="5" COLS="20">
JavaScript.FAQTs.com
Kibology for all.
</TEXTAREA>
</FORM>
<DIV>
<P>
JavaScript.FAQTs.com
</P>
<BLOCKQUOTE>
Kibology for all.
<BR>
All for Kibology.
</BLOCKQUOTE>
</DIV>
</BODY>
</HTML>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
omicronpersei8Author Commented:
devic - i'm interested in what you have but i'll have to take you up on your offer another time.
archrajan - seems to work ok.
0
GwynforWebCommented:
:)  

You can clone the node into a hidden empty div and get the innerHTML of the div, then clean the div out.
0
devicCommented:
bravo Gwyn ;)
0
GwynforWebCommented:
You can do it without cloneNode as well, about the same amount of code.  :)
0
GwynforWebCommented:
....500pts and I will show you Devic. ;)
0
devicCommented:
did I ask something? I am able to resolve any problem myself ;)
0
GwynforWebCommented:
;)  
0
omicronpersei8Author Commented:
less flirting, more answering questions. (joking)
devic, 500pts and i'll hook you up with gwyn.
0
devicCommented:
omicronpersei8,
I don't praise everybody... If I said bravo, I mean bravo. And expert's praise costs more then points ;)
0
GwynforWebCommented:
I can not have you use that terrible code above it is bugging me, use this (tested IE, NS and FireFox)

<body>
<div id="theDiv" style="border:solid 1px red;width:300">
<p>abc</p>
<p>def </p>
</div>

<form id="abc" name="myForm" action="xyx.com" target="_blank">
  <p><input type="text" name="t2"> <input> <input type="submit"> </p>
</form>


<div id="tempDiv" style="display:none"></div>

<script>
function getOuterHTML(obj){
 temp=document.getElementById(obj).cloneNode(true)
 document.getElementById('tempDiv').appendChild(temp)
 outer=document.getElementById('tempDiv').innerHTML
 document.getElementById('tempDiv').innerHTML=""
 return outer
}
alert(getOuterHTML("theDiv"))
alert(getOuterHTML("abc"))
</script>

</body>
0
devicCommented:
hehe
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.