Javascript createElement img tag is not closing the img tag, same with br tag, hr tag.

RESOLVED INVALID

Status

()

Firefox
General
RESOLVED INVALID
10 years ago
10 years ago

People

(Reporter: Rashmi, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

10 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1a1pre) Gecko/2008060403 Minefield/3.1a1pre
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1a1pre) Gecko/2008060403 Minefield/3.1a1pre

When Javascript's createElement tag is used to create an img tag, a br tag, an hr tag - the element is getting created however, it is not closed.

The img tag is created like this: <img src="someimg.gif" alt="image" width="10" height="10" >  

Instead of <img src="someimg.gif" alt="image" width="10" height="10" /> 

Similarly when a br tag, hr tag is created with Javascript's createElement , the tags are not closing. 

To see this behavior, create an html file with the html code given in the "Steps to Reproduce" box, click on the link that calls the javascript function, 
when the image tags are created by the javascript, righ-click and select just the images , and click on the "View Selection Source" option ( View Selection Source may require an extension - not sure if it comes with Firefox)

The "View Selection Source" shows that the img tags are not closed.

I think this behavior also occurs in Intenet Explorer 6. 

The fact that the img tags are not closed doesn't affect the output in Firefox, but in InternetExplorer the page appears broken, because the rest of the tags are xhtml but the img tags are not.

Possible related bug: https://bugzilla.mozilla.org/show_bug.cgi?id=280692

Reproducible: Always

Steps to Reproduce:
<?xml version="1.0" encoding="utf-8"?>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns:xhtml="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>An XHTML 1.0 Strict page</title>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
    <script type="text/javascript" xml:space="preserve">
    /*<![CDATA[*/
    function testMyDiv() {
        var myDiv = document.getElementById("mydiv");
        if (myDiv) {

            var myImage = document.createElement("IMG");
            myImage.setAttribute("src","/animage.gif");
            myImage.setAttribute("alt","Image One");
            myImage.setAttribute("width","276");
            myImage.setAttribute("height","110");
            myDiv.appendChild(myImage);

            var myImage2 = document.createElement("img");
            myImage2.setAttribute("src","/animage.gif");
            myImage2.setAttribute("alt","Image Two");
            myImage2.setAttribute("width","276");
            myImage2.setAttribute("height","110");
            myDiv.appendChild(myImage2);

            var myImage3 = document.createElementNS("http://www.w3.org/1999/xhtml","img");
            myImage3.setAttribute("src","/animage.gif");
            myImage3.setAttribute("alt","Image Three");
            myImage3.setAttribute("width","276");
            myImage3.setAttribute("height","110");             
            myDiv.appendChild(myImage3);

            var preWrittenImage = document.getElementById("placeholderimg");
            preWrittenImage.

            alert('this reached');
        }

    }
    /*]]>*/
    </script>
</head>

<body>

     <div id="mydiv" >This is my div</div>

     <div>
        <a onclick="testMyDiv()" href="#">Test images</a>
     </div>

    <div>
        The above code is creating image tags but none of the image tags are closed.
        That is the code appears like this when viewed with Fierfox's "View Selection Source".
    </div>

    <pre xml:space="preserve">
    &lt;div id="mydiv"&gt;
        This is my div
        &lt;img alt="Image One" src="http://www.google.com/logos/balloon08.gif" height="110" width="276"&gt;
        &lt;img alt="Image Two" src="http://www.google.com/logos/balloon08.gif" height="110" width="276"&gt;
        &lt;img alt="Image Three" src="http://www.google.com/logos/balloon08.gif" height="110" width="276"&gt;
    &lt;/div&gt;
    </pre>

    <div>Since this is an XHTML document I was expecting the image tags to be closed as shown below (so that the xhtml is well formed.):</div>
    <pre xml:space="preserve">
    &lt;div id="mydiv"&gt;
        This is my div
        &lt;img alt="Image One" src="http://www.google.com/logos/balloon08.gif" height="110" width="276"/&gt;
        &lt;img alt="Image Two" src="http://www.google.com/logos/balloon08.gif" height="110" width="276"/&gt;
        &lt;img alt="Image Three" src="http://www.google.com/logos/balloon08.gif" height="110" width="276"/&gt;
    &lt;/div&gt;
    </pre>

</body>
</html>
Actual Results:  
When viewed with "View Selection Source" in Firefox this is what appears:
<div id="mydiv">This is my div<img alt="Image One" src="/animage.gif" height="110" width="276"><img alt="Image Two" src="/animage.gif" height="110" width="276"><img alt="Image Three" src="/animage.gif" height="110" width="276"></div>

(The img tags are not closed)

Expected Results:  
<div id="mydiv">This is my div<img alt="Image One" src="/animage.gif" height="110" width="276"/><img alt="Image Two" src="/animage.gif" height="110" width="276"/><img alt="Image Three" src="/animage.gif" height="110" width="276"/></div>

Well formed XHTML img tags.

The rendered images and the rest of the html appear fine when viewed with Firefox,
even though the image tags are not well formed. Also, HTML Validators don't complain about the non-wellformed img tags generated with Javascript.
(Reporter)

Comment 1

10 years ago
Please delete these 2 lines of code 

var preWrittenImage = document.getElementById("placeholderimg");
            preWrittenImage.


in the "Steps to Reproduce" html code above.

Comment 2

10 years ago
If you want View Selection Source to show the XHTML serialization rather than the HTML serialization, you have to make Firefox treat the file as XHTML rather than HTML.  (As a local file, use .xhtml; on a web server, use the appropriate MIME type).  It's clear that you didn't test it as XHTML, since the root tag has no namespace.

There's no such thing as a non-well-formed DOM tree.  Close-tags are a markup concept, not a DOM tree concept.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 10 years ago
Resolution: --- → INVALID

Comment 3

10 years ago
(Semi-dup of bug 251695.)
You need to log in before you can comment on or make changes to this bug.