alternative for outerHTML property which is supported by Mozilla firefox browser

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

prasaddevivara - 30 May 2005 16:05 GMT

I am using the outerHTML property to modify the HTML of existin
elements in a web page in Internet Explorer. But same outerHTM
property is not working in firefox browser, Anybody can tell me a
alternative for outerHTML property in firefox. I am using th
following function to display an image and alternate text behind al
images of a weg page in Internet Explorer. Anybody can give solutio
for same in firefox browser.

function showimage()
{
var z=0,
tag=new Array('img');
for(n=0;n<tag.length;n++)
    {
    t=document.getElementsByTagName(tag[n]);
    arr_lst=new Array();
    {
    for(i=0;i<t.length;i++)
    {
    {
    var l;
        if ((t[i].attributes.alt.specified) && (t[i].alt!=0) &
(t[i].alt!="") && (t[i].alt.toLowerCase()!=".gif") &&
(t[i].alt.toLowerCase()!=".jpg") && (t[i].alt.toLowerCase()!=".png") &
(t[i].alt.toLowerCase()!="bytes") && (t[i].alt.toLowerCase()!="kb") &
(t[i].alt.toLowerCase()!="click here") &
(t[i].alt.toLowerCase()!="more"))
        {
        l='alt=\"'+t[i].alt+'\"';
        h=t[i].outerHTML;
        t[i].outerHTML='<INPUT TYPE="image" alt="Valid Alt Text
SRC="http://www.rampweb.com/toolbar/Images/alt_good.gif"><spa
style=\"color:#91060A;font:x-small arial;background:#FFFFC0;\"><b>'+
'+l+'</b></span> '+h;
        t[i].style.padding='3px',t[i].style.border='1px solid #91060A';
        }
    else if ((t[i].attributes.alt.specified)&&(t[i].alt==0) &
(t[i].alt==""))
        {
        l='<INPUT TYPE="image" alt="Empty alt text"
SRC="http://www.rampweb.com/toolbar/Images/alt_empty.gif">';
        h=t[i].outerHTML;
        t[i].outerHTML='<span style=\"color:#91060A;font:x-small arial;\">
+l + '</span>'+h;
        t[i].style.padding='3px',t[i].style.border='1px solid #91060A';
        }
        else if ((t[i].attributes.alt.specified) && (t[i].alt!=0) &
(t[i].alt!="") && (t[i].alt.toLowerCase()==".gif" |
t[i].alt.toLowerCase()==".jpg" || t[i].alt.toLowerCase()==".png" |
t[i].alt.toLowerCase()=="bytes" || t[i].alt.toLowerCase()=="kb" |
t[i].alt.toLowerCase()=="click here" |
t[i].alt.toLowerCase()=="more"))
        {
        l='alt=\"'+t[i].alt+'\"';
        h=t[i].outerHTML;
        t[i].outerHTML='<INPUT TYPE="image" alt="Warning: Make sure alt i
descriptive
SRC="http://www.rampweb.com/toolbar/Images/alt_warning.gif"><spa
style=\"color:#91060A;font:x-small arial;background:#FFFFC0;\"><b>'+
'+l+'</b></span> '+h;
        t[i].style.padding='3px',t[i].style.border='1px solid #91060A';
        }
    else
        {
    l='<INPUT TYPE="image" alt="Error: missing alt text
SRC="http://www.rampweb.com/toolbar/Images/alt_error.gif">';
    h=t[i].outerHTML;
    t[i].outerHTML='<span style=\"color:#91060A;font:x-smal
arial;\">'+l+'</span>'+h;
    t[i].style.padding='3px',t[i].style.border='1px solid #91060A';
    }
    }
    if(h!='')
    z=z+1;

    }
    }
}
            if(z==0)
            alert('No Images')

--
prasaddevivar

Reply to this Message

RobG - 31 May 2005 06:22 GMT

> I am using the outerHTML property to modify the HTML of existing
> elements in a web page in Internet Explorer.

As near as I can tell, outerHTML is being using to create new input
elements and insert them just before image elements. The attributes of
the new element seem to be dependent on the contents of the alt
attribute of the image elements.

So far so good?

> But same outerHTML
> property is not working in firefox browser,

Firefox does not support outerHTML.

> Anybody can tell me an
> alternative for outerHTML property in firefox.

There is no direct alternative, however the same functionality can be
achieved using DOM methods.

> I am using the
> following function to display an image and alternate text behind all
> images of a weg page in Internet Explorer. Anybody can give solution
> for same in firefox browser.

I can offer suggestions, but I can't test your code. Please replace
tabs with 2 spaces for indenting before posting and manually wrap code
at about 70 characters to prevent auto-wrapping, otherwise syntax
errors are likely to be unnecessarily introduced.

> function showimage()
> {
[quoted text clipped - 4 lines]
> t=document.getElementsByTagName(tag[n]);
> arr_lst=new Array();

arr_lst is a global variable that does not seem to ever be used. A
rather convoluted method is used to get the images collection - an
alternative is to get the collection directly using a local variable:

var t = document.images;

I presume that this is the basis for tests of a variety of HTML tags,
however why not just use an existing validator (e.g. the free W3C
validator)?

> {

This brace can likely be safely omitted, it appears to have no useful
purpose.

> for(i=0;i<t.length;i++)

Rather than evaluating the length of t each time, use a local variable
and keep i local too:

for( var i=0, len=t.length; i<len; i++ )

> {
> {

Another useless brace...

> var l;

Some like to declare variables just before they use them, but it's
easier to maintain code (to me, anyway) if the ancient practice of
declaring them all at the start is followed. Opinions vary.

Since t[i] is used a lot, it is likely more efficient to use a local
variable to keep a reference to it:

var img = t[i];

> if ((t[i].attributes.alt.specified) && (t[i].alt!=0) &&
> (t[i].alt!="") && (t[i].alt.toLowerCase()!=".gif") &&
[quoted text clipped - 3 lines]
> (t[i].alt.toLowerCase()!="more"))
> {

The above block makes 8 calls to t[i].alt.toLowerCase(), which is very
wasteful of processor effort. Use one call, store the result in local
variable 'talt' and then test that.

var talt;
if ( img.attributes.alt.specified &&
(talt = img.attributes.alt.toLowerCase()) &&
0 != talt &&
'' != talt
) {
if ( talt != ".gif" &&
talt != ".jpg" &&
talt != ".png" &&
talt != "bytes" &&
talt != "kb" &&
talt != "click here" &&
talt != "more"
) {

So test, get value and convert to lower case once.

> l='alt=\"'+t[i].alt+'\"';
> h=t[i].outerHTML;

h will be global, may as well keep it local and declare it at the start
with z and l.

>         t[i].outerHTML='<INPUT TYPE="image" alt="Valid Alt Text"
> SRC="http://www.rampweb.com/toolbar/Images/alt_good.gif"><span
> style=\"color:#91060A;font:x-small arial;background:#FFFFC0;\"><b>'+'
> '+l+'</b></span> '+h;
>         t[i].style.padding='3px',t[i].style.border='1px solid #91060A';
>         }

Here you effectively insert a new element before the image element
referenced by t[i]. A way to implement the DOM equivalent is to use a
function that will create the new element based on some parameters that
you pass, then insert it before t[i].

There is also a span tag applying some style stuff, so include the <b>
element in the style statement.

function addInp(img, tAlt, tSrc, tColor, tFont, tBG) {
var oInp = document.createElement('INPUT');
oInp.type = 'image';
oInp.alt = 'Valid Image Text';
oInp.src = tSrc;

var oSpan = document.createElement('SPAN');
oSpan.color = tColor;
oSpan.style.font = tFont;
oSpan.style.backgroundColor = tBG;
oSpan.style.fontWeight = 'bold';

var oTxt = document.createTextNode('alt="' + tAlt + '"');
oSpan.appendChild(oTxt);

img.parentNode.insertBefore(oInp, img);
img.parentNode.insertBefore(oSpan, img);
}

So you can conditionally do your outerHTML stuff or use DOM:

if ( document.createElement ) {
addInp( img, 'Valid Alt Text', 'a.gif',
'#333399', 'x-small arial', '#FFFFC0');

} else if ( img.outerHTML ) {
// the outerHTML stuff from above

} else {
return null;
}

img.style.padding = '3px'
img.style.border = '1px solid #91060A';

Assuming support for the style object.

I'm not sure this is an appropriate use of an input. Why not just
insert an image?

> else if ((t[i].attributes.alt.specified)&&(t[i].alt==0) &&
> (t[i].alt==""))

This could just be an else at the end of the outside if loop and also
use the conditional DOM method.

>         {
>         l='<INPUT TYPE="image" alt="Empty alt text"
[quoted text clipped - 4 lines]
>         t[i].style.padding='3px',t[i].style.border='1px solid #91060A';
>         }

> else if ((t[i].attributes.alt.specified) && (t[i].alt!=0) &&
> (t[i].alt!="") && (t[i].alt.toLowerCase()==".gif" ||
[quoted text clipped - 3 lines]
> t[i].alt.toLowerCase()=="more"))
> {

This block can go second so you don't have to test the first three
conditions again.

} else if (
talt == ".gif" ||
talt == ".jpg" ||
talt == ".png" ||
talt == "bytes" ||
talt == "kb" ||
talt == "click here" ||
talt == "more"
) {

>         l='alt=\"'+t[i].alt+'\"';
>         h=t[i].outerHTML;
>         t[i].outerHTML='<INPUT TYPE="image" alt="Warning: Make sure alt is
> descriptive"

There are times when the alt attribute should be empty:

<URL:http://www.w3.org/TR/html4/struct/objects.html#adef-alt>

I also think you will have a very difficult time deciding what is
appropriate text - though what you have coded is likely a sub-set of
inappropriate text values.

> SRC="http://www.rampweb.com/toolbar/Images/alt_warning.gif"><span
> style=\"color:#91060A;font:x-small arial;background:#FFFFC0;\"><b>'+'
[quoted text clipped - 11 lines]
> }
> }

Delete a curly brace?

>     if(h!='')
>     z=z+1;
>
>     }
>     }

Delete a curly brace?

> }
> if(z==0)
> alert('No Images');

Signature

Rob

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / JavaScript / May 2005

alternative for outerHTML property which is supported by Mozilla firefox browser