[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 24469
  • Last Modified:

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>
0
omicronpersei8
Asked:
omicronpersei8
  • 6
  • 6
  • 6
  • +2
1 Solution
 
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

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

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 6
  • 6
  • 6
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now