Problem dealing with double quotes in InnerHTML

[Mahernoz]

Hi Friends,

I have some problem here. I am using Asp.net 2.0 but that is not
relevant to my Question.

I have a <div> tag.
<div id="dvAArea" runat="server"></div>

and an HiddenField

<input type="hidden" runat="server" id="hidAArea" />

on click of a button i have a function

function CopyHTML()
{
document.getElementById('<%= hidAArea.ClientID %>').value
= MakeXMLParseable(document.getElementById('<%= dvAArea.ClientID
%>').innerHTML);
}


the problem here is i want to make the html of dvAArea Xml compatible.
but i am finding that the innerHTML property removes the double quotes
in IE6.



And as this removal occurs i cannot load it as a validXml (which is
used for other purpose).



Regards,
Mahernoz

 

[RobG]

Hi Friends,

I have some problem here. I am using Asp.net 2.0 but that is not
relevant to my Question.

I have a <div> tag.
<div id="dvAArea" runat="server"></div>

Div elements don't have a runat attribute in HTML 4.

and an HiddenField

<input type="hidden" runat="server" id="hidAArea" />

on click of a button i have a function

function CopyHTML()
{
document.getElementById('<%= hidAArea.ClientID %>').value
= MakeXMLParseable(document.getElementById('<%= dvAArea.ClientID
%>').innerHTML);

Don't post sever code, post what your client gets. How you program
your server to do that is your reponsibility. Questions relating to
server-side programming should be asked in a community forum that
supports your chosen server technology.

As far as I can tell, your div element doesn't have any child nodes,
so its innerHTML property will be an empty string. Where are the
problematic quotes?

}

the problem here is i want to make the html of dvAArea Xml compatible.
but i am finding that the innerHTML property removes the double quotes
in IE6.

It is something of a paradox to want to use innerHTML to insert "XML
compatible". But maybe I'm just easily amused.

And as this removal occurs i cannot load it as a validXml (which is
used for other purpose).

Maybe if we could see the attempted XML, what you get and what you
expect, then something more could be said...

 

[Mahernoz]

Div elements don't have a runat attribute in HTML 4.







Don't post sever code, post what your client gets. How you program
your server to do that is your reponsibility. Questions relating to
server-side programming should be asked in a community forum that
supports your chosen server technology.

As far as I can tell, your div element doesn't have any child nodes,
so its innerHTML property will be an empty string. Where are the
problematic quotes?



It is something of a paradox to want to use innerHTML to insert "XML
compatible". But maybe I'm just easily amused.


Maybe if we could see the attempted XML, what you get and what you
expect, then something more could be said...

the code generated in div is html but it is also a wellformed xml.
any answers?

 

[Mahernoz]

the code generated in div is html but it is also a wellformed xml.
any answers?

putted simply i am finding trouble using innerHTML property with
Internet Explorer as it removes the "double quotes" from my rendered
html.
i am just looking for a way so that the double quotes are not removed
when innerHTML is called in Internet Explorer (mozilla works fine).

Regards,
Mahernoz

 

[RobG]

I have a <div> tag.
<div id="dvAArea" runat="server"></div>
and an HiddenField
<input type="hidden" runat="server" id="hidAArea" />
on click of a button i have a function
function CopyHTML()
{
document.getElementById('<%= hidAArea.ClientID %>').value
= MakeXMLParseable(document.getElementById('<%= dvAArea.ClientID
%>').innerHTML); [...]
As far as I can tell, your div element doesn't have any child nodes,
so its innerHTML property will be an empty string. Where are the
problematic quotes?
} [...]
Maybe if we could see the attempted XML, what you get and what you
expect, then something more could be said...

[...]
putted simply i am finding trouble using innerHTML property with
Internet Explorer as it removes the "double quotes" from my rendered
html.
i am just looking for a way so that the double quotes are not removed
when innerHTML is called in Internet Explorer (mozilla works fine).

Given:

<p onclick="alert(this.innerHTML);">get "innerHTML"</p>

IE 6 shows:

get "innerHTML"

so your issue is not with the innerHTML property itself.

 

[Mahernoz]

I have a <div> tag.
<div id="dvAArea" runat="server"></div>
and an HiddenField
<input type="hidden" runat="server" id="hidAArea" />
on click of a button i have a function
function CopyHTML()
{
document.getElementById('<%= hidAArea.ClientID %>').value
= MakeXMLParseable(document.getElementById('<%= dvAArea.ClientID
%>').innerHTML); [...]
As far as I can tell, your div element doesn't have any child nodes,
so its innerHTML property will be an empty string. Where are the
problematic quotes?
} [...]
Maybe if we could see the attempted XML, what you get and what you
expect, then something more could be said...

[...]
putted simply i am finding trouble using innerHTML property with
Internet Explorer as it removes the "double quotes" from my rendered
html.
i am just looking for a way so that the double quotes are not removed
when innerHTML is called in Internet Explorer (mozilla works fine).

Given:

<p onclick="alert(this.innerHTML);">get "innerHTML"</p>

IE 6 shows:

get "innerHTML"

so your issue is not with the innerHTML property itself.

Hi,

if i replace that string with this string then there are no double
quotes...

<p onclick="alert(this.innerHTML);"><font class="AInput">3434</font></
p>

it surprisingly removes the double quotes.

Regards,
Mahernoz

 

[rf]

I have a <div> tag.
<div id="dvAArea" runat="server"></div>
and an HiddenField
<input type="hidden" runat="server" id="hidAArea" />

on click of a button i have a function

function CopyHTML()
{
document.getElementById('<%= hidAArea.ClientID
%>').value
= MakeXMLParseable(document.getElementById('<%= dvAArea.ClientID
%>').innerHTML); [...]
As far as I can tell, your div element doesn't have any child
nodes,
so its innerHTML property will be an empty string. Where are the
problematic quotes?

}

[...]
Maybe if we could see the attempted XML, what you get and what you
expect, then something more could be said... [...]
putted simply i am finding trouble using innerHTML property with
Internet Explorer as it removes the "double quotes" from my rendered
html.
i am just looking for a way so that the double quotes are not removed
when innerHTML is called in Internet Explorer (mozilla works fine).

Given:

<p onclick="alert(this.innerHTML);">get "innerHTML"</p>

IE 6 shows:

get "innerHTML"

so your issue is not with the innerHTML property itself.

Hi,

if i replace that string with this string then there are no double
quotes...

<p onclick="alert(this.innerHTML);"><font class="AInput">3434</font></
p>

it surprisingly removes the double quotes.

I have read this thread very very carefully and find that

a) it has little if anything to do with javascript.

b) I don't know what it actually has to do with. You keep mentioning double
quotes and their removal but you fail to mention where they are exactly
removed from.

In any case consider &quote;

 

[Mahernoz]

[...]
I have a <div> tag.
<div id="dvAArea" runat="server"></div>
and an HiddenField
<input type="hidden" runat="server" id="hidAArea" />
on click of a button i have a function
function CopyHTML()
{
document.getElementById('<%= hidAArea.ClientID
%>').value
= MakeXMLParseable(document.getElementById('<%= dvAArea.ClientID
%>').innerHTML);
[...]
As far as I can tell, your div element doesn't have any child
nodes,
so its innerHTML property will be an empty string. Where are the
problematic quotes?
}
[...]
Maybe if we could see the attempted XML, what you get and what you
expect, then something more could be said...
[...]
putted simply i am finding trouble using innerHTML property with
Internet Explorer as it removes the "double quotes" from my rendered
html.
i am just looking for a way so that the double quotes are not removed
when innerHTML is called in Internet Explorer (mozilla works fine).
Given:
<p onclick="alert(this.innerHTML);">get "innerHTML"</p>
IE 6 shows:
get "innerHTML"
so your issue is not with the innerHTML property itself.

Hi,

if i replace that string with this string then there are no double
quotes...

<p onclick="alert(this.innerHTML);"><font class="AInput">3434</font></
p>

it surprisingly removes the double quotes.

I have read this thread very very carefully and find that

a) it has little if anything to do with javascript.

b) I don't know what it actually has to do with. You keep mentioning double
quotes and their removal but you fail to mention where they are exactly
removed from.

In any case consider &quote;

I am stuck up here with a bug in IE6.

to simplify i have made a demo program.

<p onclick="alert(this.innerHTML);"><font class="AInput">3434</font></
p>

it surprisingly removes the double quotes in IE6.

I need that when onclick is fired i should also get double quotes.
which means...
i need <font class="AInput">3434</font> output
instead of
<font class=AInput>3434</font> as output.

Regards,
Mahernoz

 

[David Mark]

I have a <div> tag.
<div id="dvAArea" runat="server"></div>
and an HiddenField
<input type="hidden" runat="server" id="hidAArea" />
on click of a button i have a function
function CopyHTML()
{
document.getElementById('<%= hidAArea.ClientID %>').value
= MakeXMLParseable(document.getElementById('<%= dvAArea.ClientID
%>').innerHTML); [...]
As far as I can tell, your div element doesn't have any child nodes,
so its innerHTML property will be an empty string. Where are the
problematic quotes?
} [...]
Maybe if we could see the attempted XML, what you get and what you
expect, then something more could be said... [...]
putted simply i am finding trouble using innerHTML property with
Internet Explorer as it removes the "double quotes" from my rendered
html.
i am just looking for a way so that the double quotes are not removed
when innerHTML is called in Internet Explorer (mozilla works fine).

Given:

<p onclick="alert(this.innerHTML);">get "innerHTML"</p>

IE 6 shows:

get "innerHTML"

so your issue is not with the innerHTML property itself.

Hi,

if i replace that string with this string then there are no double
quotes...

<p onclick="alert(this.innerHTML);"><font class="AInput">3434</font></
p>

it surprisingly removes the double quotes.

It isn't that surprising as there is no standard defined for
innerHTML. IE chose to implement it slightly differently than
FireFox. If you need to create an XML document with innerHTML, you
will have to normalize it yourself. You would be better off writing a
wrapper for innerHTML as there are more issues to deal with than
unquoted attribute values.

 

[RobG]

<p onclick="alert(this.innerHTML);">get "innerHTML"</p>

IE 6 shows:

get "innerHTML"

so your issue is not with the innerHTML property itself.

[...]
if i replace that string with this string then there are no double
quotes...

<p onclick="alert(this.innerHTML);"><font class="AInput">3434</font></
p>

it surprisingly removes the double quotes.

Quotes around attribute values are not mandatory in HTML, they are
only required where the value has certain characters:

"In certain cases, authors may specify the value of an attribute
without any quotation marks. The attribute value may only
contain letters (a-z and A-Z), digits (0-9), hyphens (ASCII
decimal 45), periods (ASCII decimal 46), underscores (ASCII
decimal 95), and colons (ASCII decimal 58). We recommend using
quotation marks even when it is possible to eliminate them."

<URL: http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.2.2 >

I guess whoever implemented innerHTML in IE decided to remove them
where they aren't required.

As David said, there is no public standard for innerHTML and what
there is at MSDN is scant - it does not say that it returns exactly
the original source. So you are left to parse the value yourself and
insert quotes as appropriate. You should also convert attribute names
to lower case, as some browsers will report them in uppercase.

I think the whole idea of using innerHTML as the source of valid XML
markup is flawed.

 

[rf]

I am stuck up here with a bug in IE6.

to simplify i have made a demo program.

<p onclick="alert(this.innerHTML);"><font class="AInput">3434</font></
p>

it surprisingly removes the double quotes in IE6.

I need that when onclick is fired i should also get double quotes.
which means...
i need <font class="AInput">3434</font> output
instead of
<font class=AInput>3434</font> as output.

Sorry but I still have no idea what your are talking about nor what your
quote issue is. You keep saying quotes are removed but you still fail to
state from where.

Enough for me

 

[Mahernoz]

Given:
<p onclick="alert(this.innerHTML);">get "innerHTML"</p>
IE 6 shows:
get "innerHTML"
so your issue is not with the innerHTML property itself.

[...]
if i replace that string with this string then there are no double
quotes...

<p onclick="alert(this.innerHTML);"><font class="AInput">3434</font></
p>

it surprisingly removes the double quotes.

Quotes around attribute values are not mandatory in HTML, they are
only required where the value has certain characters:

"In certain cases, authors may specify the value of an attribute
without any quotation marks. The attribute value may only
contain letters (a-z and A-Z), digits (0-9), hyphens (ASCII
decimal 45), periods (ASCII decimal 46), underscores (ASCII
decimal 95), and colons (ASCII decimal 58). We recommend using
quotation marks even when it is possible to eliminate them."

<URL:http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.2.2>

I guess whoever implemented innerHTML in IE decided to remove them
where they aren't required.

As David said, there is no public standard for innerHTML and what
there is at MSDN is scant - it does not say that it returns exactly
the original source. So you are left to parse the value yourself and
insert quotes as appropriate. You should also convert attribute names
to lower case, as some browsers will report them in uppercase.

I think the whole idea of using innerHTML as the source of valid XML
markup is flawed.

Hi,

I think the whole idea of using innerHTML as the source of valid XML
markup is flawed.
- Can you recommend a method which is a "better way" to take the html-
contents of a DIV from an html file and put it into a database. (this
html will be rendered on a page, so i need to make it well-formed.)

I don't want implementation details, just a suggestion of having a
better way.

Regards,
Mahernoz

 

[David Mark]

Given:
<p onclick="alert(this.innerHTML);">get "innerHTML"</p>
IE 6 shows:
get "innerHTML"
so your issue is not with the innerHTML property itself. [...]
if i replace that string with this string then there are no double
quotes...
<p onclick="alert(this.innerHTML);"><font class="AInput">3434</font></
p>
it surprisingly removes the double quotes.

Quotes around attribute values are not mandatory in HTML, they are
only required where the value has certain characters:

"In certain cases, authors may specify the value of an attribute
without any quotation marks. The attribute value may only
contain letters (a-z and A-Z), digits (0-9), hyphens (ASCII
decimal 45), periods (ASCII decimal 46), underscores (ASCII
decimal 95), and colons (ASCII decimal 58). We recommend using
quotation marks even when it is possible to eliminate them."

I guess whoever implemented innerHTML in IE decided to remove them
where they aren't required.

As David said, there is no public standard for innerHTML and what
there is at MSDN is scant - it does not say that it returns exactly
the original source. So you are left to parse the value yourself and
insert quotes as appropriate. You should also convert attribute names
to lower case, as some browsers will report them in uppercase.

I think the whole idea of using innerHTML as the source of valid XML
markup is flawed.

Hi,

I think the whole idea of using innerHTML as the source of valid XML
markup is flawed.
- Can you recommend a method which is a "better way" to take the html-
contents of a DIV from an html file and put it into a database. (this
html will be rendered on a page, so i need to make it well-formed.)

It certainly doesn't have to be well-formed to render on a page,
unless you are serving it as XHTML (which is impossible in IE.)

An innerHTML wrapper is fairly simple to write, but you will need to
write a getAttribute wrapper first as IE's implementation of that
method (which is a standard) is botched. Just iterate through the
child nodes of the element, recursing for each element node and build
the (X)HTML string.

 

[Evertjan.]

Randy Webb wrote on 11 dec 2007 in comp.lang.javascript:

Mahernoz said the following on 12/11/2007 5:42 AM:



No, there is no "bug" in IE6 with regards to what you are seeing.


It removes quotes that aren't required. Want it to leave the quotes?
Add a trailing space. Won't make a hill of beans to HTML but it will
cause IE to leave the optional quote marks.

<p onclick="alert(this.innerHTML);"><font class="AInput
">3434</font></
p>

Note the space after the class name.

It seems some of us expect innerHTML to return
the HTML script from the html file
that rendered the browser page.

This is not the case!!

innerHTML just returns the string version
of the rendered html in the browser.

One could say that the string is build anew
from the requested element's inner DOM tree.


Example file [IE7]:

<table onclick='alert(this.innerHTML)'>
<tr><td>Blah</tr></td>
<table>

alerts thus:

<TABLE>
<TBODY>
<TR>
<TD>Blah </TD></TR></TBODY></TABLE>

And this file [IE7]:

<div onclick='alert(this.innerHTML)'>
<table>
<tr><td>
Blah
</table>
</div>

alerts EXACTLY the same RENDERED code
as the first file example did!!!!

 

[Evertjan.]

Evertjan. wrote on 11 dec 2007 in comp.lang.javascript:

One could say that the string is build anew
from the requested element's inner DOM tree.


Example file [IE7]:

<table onclick='alert(this.innerHTML)'>
<tr><td>Blah</tr></td>
<table>

Sorry, I ment this one :

<div onclick='alert(this.innerHTML)'>
<table>
<tr><td>
Blah
</td></tr>
</table>
</div>

alerts thus:

<TABLE>
<TBODY>
<TR>
<TD>Blah </TD></TR></TBODY></TABLE>

And this file [IE7]:

<div onclick='alert(this.innerHTML)'>
<table>
<tr><td>
Blah
</table>
</div>

alerts EXACTLY the same RENDERED code
as the first file example did!!!!

 

[Evertjan.]

Randy Webb wrote on 11 dec 2007 in comp.lang.javascript:

<div id="someContainer">old content</div>
document.getElementById('someContainer').innerHTML="new content";
alert(document.getElementById('someContainer').innerHTML);

Should the alert give you "old content" or "new content"?

In IE7 I get "new content", as expected.

Expected, because that is
the textNode reconstructed into a Javascript string,
and then alerted out.

"Should" however is what the specs say. [If they do]

It returns the normalized HTML that the browser is using.

I do not think the browser is "using" a normalized HTML sting.

The browser just renders the DOM from the html file text as it is.

What the browser reconstructs from the DOM to a string for use in
innerHTML, would you call that "normalized"?

I don't think so, as a possible error made here in that reconstruction
does not harm the DOM if the innerHTML string is not used for changing
the DOM.

 

[Thomas 'PointedEars' Lahn]

Div elements don't have a runat attribute in HTML 4.

True, however I suppose it only looks like HTML. Which would mean the
OP is wrong as their runtime environment is relevant to their question.


PointedEars

 

[Thomas 'PointedEars' Lahn]

I think the whole idea of using innerHTML as the source of valid XML
markup is flawed.

You did not write that; Rob did. Please learn how to quote properly.
That is even possible with Google Groups; BTDT.

See http://jibbering.com/faq/ pp.

- Can you recommend a method which is a "better way" to take the html-
contents of a DIV from an html file and put it into a database. (this
html will be rendered on a page, so i need to make it well-formed.)

You should first understand what are SGML, HTML, XML, and XHTML. HTML as an
application of SGML does not need to fulfill XML's "well-formed" criterium,
which is why there is XHTML which is HTML reformulated as an application of
XML, which is a subset of SGML. However, MSHTML-based UAs do not support
XHTML natively to date; they use the same old tag-soup parser for that, if,
and only if served as text/html as opposed to the proper
application/xhtml+xml (on which they choke). Hence the result you observe
with `innerHTML'.

I don't want implementation details, just a suggestion of having a
better way.

Serialize the document tree.


PointedEars

 

[Mahernoz]

You did not write that; Rob did. Please learn how to quote properly.
That is even possible with Google Groups; BTDT.

Seehttp://jibbering.com/faq/pp.


You should first understand what are SGML, HTML, XML, and XHTML. HTML as an
application of SGML does not need to fulfill XML's "well-formed" criterium,
which is why there is XHTML which is HTML reformulated as an application of
XML, which is a subset of SGML. However, MSHTML-based UAs do not support
XHTML natively to date; they use the same old tag-soup parser for that, if,
and only if served as text/html as opposed to the proper
application/xhtml+xml (on which they choke). Hence the result you observe
with `innerHTML'.


Serialize the document tree.

PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann

Hi Friends,

I have got a valid XHTML Converter which solved my problem. This
converter converts any HTML to XHTML (wellformed XML compatible) very
easily.

Please check out : http://www.eggheadcafe.com/articles/20030317.asp

Very good converter.

Friends, Thanks for your help.

Regards,
Mahernoz

 

[Mahernoz]

Mahernoz said the following on 12/15/2007 12:31 AM:






Not if ~85% of the web can't process XHTML as anything but tag soup. If
you are going to do that, you may as well just use HTML4.01 Strict.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ -http://jibbering.com/faq/index.html
Javascript Best Practices -http://www.JavascriptToolbox.com/bestpractices/

i will need this on the admin site and the admin has a brand new
firefox, so it won't be a problem.

i am right now caught in a different soup.

I want to copy the updated contents of a div(which has a table within
which there are textbox and <select>) to another div. I am not able
to
copy the updated values of the textbox and <select> dropdowns, the
copy happens perfectly well in Internet Explorer but not in Mozilla.

*************************************
function CopyHTML()
{
document.getElementById('<%= hidAArea.ClientID %>').value
= MakeXMLParseable(document.getElementById('<%= dvAArea.ClientID
%>').innerHTML);

}
************************************

I guess i have to use http://slayeroffice.com/articles/innerHTML_alternatives/#4a
this method. but this method also doesn't give the updated contents of
textbox and dropdowns values (if changed).

Regards,
Mahernoz