DIV and InnerHTML differences IE/Firefox

Discussion in 'Javascript' started by Hoss, Mar 26, 2006.

  1. Hoss

    Hoss Guest

    Hello all-

    This is what im trying to achieve. At the top of my page there is some
    search functionality, through which you cause to be loaded a string
    representing an HTML page. Below this and occuupying about 80% of the
    window real estate, there is a DIV. There is also a toggle button with
    two options "Code View" and "Text View" as I have named them. Depending
    on which mode you are in, you can see the block of HTML either as code
    (in other words the tags are not rendered. You see the HTML as it
    exists.) or as text (rendered HTML). Consider the following code, which
    is a simplified version of the page.

    <script language="javascript">
    var mode = "code";
    var s = "<html><head>
    <style type="text/css">
    My Stylesheet
    </style>
    <title>
    MyTitle
    </title>
    </head>
    <body>";

    function ViewDoc()
    {
    if(mode == "code")
    document.getElementById("docArea").innerText = s;
    else
    document.getElementById("docArea").innerHTML = s;
    }
    function ChageMode()
    {
    if(mode == "code")
    mode == "text";
    else
    mode == "code";
    }
    </script>
    <HTML><BODY>
    <table>
    <tr>
    <td>
    <input type='button' onclick='ViewDoc()' value='View Document'>
    <input type='button' onclick-='ChangeMode() value='Change Mode'>
    </td>
    </tr>
    </table>
    <div id='docArea'/>
    </BODY></HTML

    The variable s contains an actual example of some HTML im trying to
    load here (with the contents of the stylesheet omitted.)

    Now, the following works fine in Internet Explorer. It does not work at
    all in Mozilla Firefox. In firefox, for example, I have to cut out the
    stylesheet, or the entire page goes fubar. Without the embedded
    stylesheet, the "text" view (rendered html) works just fine. But the
    "innerText" does not work in Firefox, and im not sure how to replicate
    it.

    Thanks in advance-
    Hoss, Mar 26, 2006
    #1
    1. Advertising

  2. Hoss

    RobG Guest

    Hoss said on 27/03/2006 8:59 AM AEST:
    > Hello all-
    >
    > This is what im trying to achieve. At the top of my page there is some
    > search functionality, through which you cause to be loaded a string
    > representing an HTML page. Below this and occuupying about 80% of the
    > window real estate, there is a DIV. There is also a toggle button with
    > two options "Code View" and "Text View" as I have named them. Depending
    > on which mode you are in, you can see the block of HTML either as code
    > (in other words the tags are not rendered. You see the HTML as it
    > exists.) or as text (rendered HTML). Consider the following code, which
    > is a simplified version of the page.
    >
    > <script language="javascript">


    The language attribute is deprecated, type is required:

    <script type="text/javascript">


    > var mode = "code";
    > var s = "<html><head>
    > <style type="text/css">
    > My Stylesheet
    > </style>
    > <title>
    > MyTitle
    > </title>
    > </head>
    > <body>";


    You can't have newlines in string literals. If the above works at all,
    it is due to error correction. I think what you want is:

    var s = "<html><head><style type='text/css'>"
    + "My Stylesheet</style><title>MyTitle</title>"
    + "</head><body>";

    That will create a 'valid' JavaScript variable called 's', but the
    content of s is not valid HTML. Also, even if you make it valid, a
    document can only have one body, head and title element so when added to
    the document as HTML it will make it invalid.


    >
    > function ViewDoc()
    > {
    > if(mode == "code")
    > document.getElementById("docArea").innerText = s;


    innerText is not widely supported outside IE. Cross-browser solutions
    have been posted, search the archives for 'innerText textContent innerHTML'


    > else
    > document.getElementById("docArea").innerHTML = s;


    And now you have an invalid document if 's' contains a title, body or
    head element.


    [...]

    load here (with the contents of the stylesheet omitted.)
    >
    > Now, the following works fine in Internet Explorer. It does not work at
    > all in Mozilla Firefox. In firefox, for example, I have to cut out the
    > stylesheet, or the entire page goes fubar. Without the embedded
    > stylesheet, the "text" view (rendered html) works just fine. But the
    > "innerText" does not work in Firefox, and im not sure how to replicate
    > it.
    >
    > Thanks in advance-



    Using innerHTML and a regular expression to remove tags:

    function getText(el)
    {
    if (el.textContent) return el.textContent;
    if (el.innerText) return el.innerText;
    return el.innerHTML.replace(/<[^>]*>/g,'');
    }


    Using recursion rather than innerHTML or regular expression:

    function getText(el)
    {
    if (el.textContent) return el.textContent;
    if (el.innerText) return el.innerText;
    return getText2(el);

    function getText2(el) {
    var x = el.childNodes;
    var txt = '';
    for (var i=0, len=x.length; i<len; ++i){
    if (3 == x.nodeType) {
    txt += x.data;
    } else if (1 == x.nodeType){
    txt += getText2(x);
    }
    }
    return txt.replace(/\s+/g,' ');
    }
    }


    --
    Rob
    RobG, Mar 27, 2006
    #2
    1. Advertising

  3. Hoss

    Hoss Guest

    I guess my first post was a little insufficient.

    The "s" variable does not in fact have newlines in it- it would have
    been better represented the way you put it.

    > That will create a 'valid' JavaScript variable called 's', but the
    > content of s is not valid HTML. Also, even if you make it valid, a
    > document can only have one body, head and title element so when added to
    > the document as HTML it will make it invalid.


    If this be true, what would be a good way to achieve what im trying to
    do? I need to dynamically write an HTML page to an element on my page.
    I could use an <iframe>, but then you get problems with dynamically
    sizing the height. In any case, the way im describing it (using a DIV)
    works perfectly fine in both IE, and Firefox too as long as you cut
    out the embedded stylesheet. The only problem is in displaying the HTML
    un-rendered into a div in firefox.

    > Using innerHTML and a regular expression to remove tags:


    Removing the tags defeats the purpose of the entire thing. Im trying to
    display the HTML as "code." or exactly what youd see if you wrote it to
    a file and loaded it up in Notepad.
    Hoss, Mar 27, 2006
    #3
  4. Hoss

    RobG Guest

    Hoss said on 27/03/2006 1:58 PM AEST:
    > I guess my first post was a little insufficient.
    >
    > The "s" variable does not in fact have newlines in it- it would have
    > been better represented the way you put it.
    >
    >
    >>That will create a 'valid' JavaScript variable called 's', but the
    >>content of s is not valid HTML. Also, even if you make it valid, a
    >>document can only have one body, head and title element so when added to
    >>the document as HTML it will make it invalid.

    >
    >
    > If this be true, what would be a good way to achieve what im trying to
    > do? I need to dynamically write an HTML page to an element on my page.
    > I could use an <iframe>, but then you get problems with dynamically
    > sizing the height.


    What is your issue with height? You can set the height of an iFrame to
    whatever you want.

    Your other options are a frame or a pop-up, neither of which are
    particularly liked but there you go.


    > In any case, the way im describing it (using a DIV)
    > works perfectly fine in both IE, and Firefox too as long as you cut
    > out the embedded stylesheet.


    You are depending on your browser to 'fix' the invalid document. You
    can't be sure that all browsers will do it the same, or that all
    browsers will continue to do it consistently.


    > The only problem is in displaying the HTML
    > un-rendered into a div in firefox.


    Because Firefox doesn't support innerText.


    >>Using innerHTML and a regular expression to remove tags:

    >
    >
    > Removing the tags defeats the purpose of the entire thing. Im trying to
    > display the HTML as "code." or exactly what youd see if you wrote it to
    > a file and loaded it up in Notepad.


    I did that to emulate your use of innerText which removes all the tags.



    --
    Rob
    RobG, Mar 27, 2006
    #4
  5. Hoss

    Csaba Gabor Guest

    RobG wrote:
    > Hoss said on 27/03/2006 8:59 AM AEST:
    > > Consider the following code, which
    > > is a simplified version of the page.

    ....
    > > var mode = "code";
    > > var s = "<html><head>
    > > <style type="text/css">
    > > My Stylesheet
    > > </style>
    > > <title>
    > > MyTitle
    > > </title>
    > > </head>
    > > <body>";

    >
    > You can't have newlines in string literals. If the above works at all,
    > it is due to error correction. I think what you want is:
    >
    > var s = "<html><head><style type='text/css'>"
    > + "My Stylesheet</style><title>MyTitle</title>"
    > + "</head><body>";


    <span id=foo onclick="alert('But don\'t \
    forget&nbsp;to\
    mention \n\
    &quot;this"')">Click me</span>


    Csaba Gabor from Vienna
    Csaba Gabor, Mar 27, 2006
    #5
  6. Hoss

    Csaba Gabor Guest

    [sorry in case you see this twice - my earlier post was overquoting]

    RobG wrote:
    > Hoss said on 27/03/2006 8:59 AM AEST:
    > > Consider the following code, which
    > > is a simplified version of the page.

    ....
    > > var mode = "code";
    > > var s = "<html><head>
    > > <style type="text/css">
    > > My Stylesheet
    > > </style>
    > > <title>
    > > MyTitle
    > > </title>
    > > </head>
    > > <body>";

    >
    > You can't have newlines in string literals.

    ....

    <span id=foo onclick="alert('But don\'t \
    forget&nbsp;to\
    mention \n\
    &quot;this"')">Click me</span>


    Csaba Gabor from Vienna
    Csaba Gabor, Mar 27, 2006
    #6
  7. Hoss

    Hoss Guest


    >
    > I did that to emulate your use of innerText which removes all the tags.
    >


    I am sorry, that is incorrect. I am using innerText and it is
    displaying the document tags and all. In other words if my string =
    "<HTML><HEAD><BODY>" and I say div.innerText = string then this is what
    is displayed on the screen

    <HTML><HEAD><BODY>
    Hoss, Mar 27, 2006
    #7
  8. Hoss

    RobG Guest

    Hoss said on 28/03/2006 3:21 AM AEST:
    >>I did that to emulate your use of innerText which removes all the tags.
    >>

    >
    >
    > I am sorry, that is incorrect. I am using innerText and it is
    > displaying the document tags and all. In other words if my string =
    > "<HTML><HEAD><BODY>" and I say div.innerText = string then this is what
    > is displayed on the screen
    >
    > <HTML><HEAD><BODY>
    >



    Ahh, now I see what you are doing - sorry, I was completely on the wrong
    track. For all browsers, including IE, use:


    var p = document.createElement('pre');
    p.appendChild(document.createTextNode(s));
    document.getElementById("docArea").appendChild(p);


    which will work in any DOM 1 compliant browser, so virtually anything
    after IE/NN 4 and certainly anything that supports getElementById.

    The use of the 'pre' element isn't essential but it preserves line breaks.


    --
    Rob
    RobG, Mar 28, 2006
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Home_Job_opportunity
    Replies:
    0
    Views:
    496
    Home_Job_opportunity
    Jan 8, 2009
  2. Home_Job_opportunity
    Replies:
    0
    Views:
    580
    Home_Job_opportunity
    Jan 14, 2009
  3. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    741
  4. mscir
    Replies:
    3
    Views:
    303
    Martin Honnen
    Jun 26, 2005
  5. sonic
    Replies:
    5
    Views:
    280
    Randy Webb
    Jul 11, 2006
Loading...

Share This Page