473,246 Members | 1,605 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,246 software developers and data experts.

innerHTML

I'm not sure this is a javascript issue or an HTML issue. I notice
that when I extract the contents of a div using the innerHTML property
(?), that I wind up with a literal variable (?) which exactly matches
the contents of the div with one exception.

It seems that whenever the code includes a tag which uses the forward
slash against the closing bracket (say the break tag ..... />) that
the browser, or HTML, or javascript, or something else, removes the
forward slash.

I've tried this on safari, chrome, mozilla, and IE and they all seem
to do the same thing.

Can someone tell my why this is happening and if there is a way to get
around it?

Regards,
PaPa

Here is some code which demonstrates the issue.

<body >

<div id="test1">
<p>This is a test to see if the / symbol is recreated here </p>
<pnow we will add a break tag </p><br />
</div>

<script type="text/javascript">
var lit=document.getElementById("test1").innerHTML;
alert(lit);

</script>
</body>

In the alert box, you should see all the forward slashes in the
"test1" div, except for the forward slash in the br tag.
Oct 12 '08 #1
6 4177
On 2008-10-12 17:05, PaPa wrote:
I'm not sure this is a javascript issue or an HTML issue. I notice
that when I extract the contents of a div using the innerHTML property
(?), that I wind up with a literal variable (?) which exactly matches
the contents of the div with one exception.

It seems that whenever the code includes a tag which uses the forward
slash against the closing bracket (say the break tag ..... />) that
the browser, or HTML, or javascript, or something else, removes the
forward slash.
I don't know what a "literal variable" is, but your assumption that the
innerHTML property holds the div contents exactly as you wrote them is
incorrect, and not only in the case of empty elements like <br/>. Try
this, for example (in an HTML document, not XHTML):

<div><table><tr><td>hello</table></div>

The innerHTML of the <divwill include the implicit <tbodyelement as
well the closing tags for <tdand <tr>:

<table><tbody><tr><td>hello</td></tr></tbody></table>

innerHTML returns the parsed and modified HTML contents of an element,
the way the browser sees it.
Can someone tell my why this is happening and if there is a way to get
around it?
Why do you want to get around it? In current browsers, even if your
document is XHTML, you can assign what you retrieved from one element's
innerHTML property to another element's innerHTML property without
errors. The contents will be automatically converted to a valid XHTML
fragment. You can even do something like this:

node.innerHTML = "<u><i>hey</u></i>";

which will automagically be fixed to "<u><i>hey</i></u>". Older browsers
like Firefox v1 or Safari v? did not support innerHTML as a setter in
XML documents, even though reading the value would work.

I don't think there's any way to get the literal markup contents of an
element, at least not through the DOM.
- Conrad
Oct 12 '08 #2
PaPa wrote:
On Oct 12, 11:47 am, Conrad Lender <crlen...@yahoo.comwrote:
>[...] In current browsers, even if your document is XHTML, you can
assign what you retrieved from one element's innerHTML property to
another element's innerHTML property without errors.
Of course you cannot. That is only possible when the XHTML markup
is not regarded XHTML but tag soup in the first place.
>The contents will be automatically converted to a valid XHTML fragment.
You can even do something like this:

node.innerHTML = "<u><i>hey</u></i>";

which will automagically be fixed to "<u><i>hey</i></u>". Older
browsers like Firefox v1 or Safari v? did not support innerHTML as a
setter in XML documents, even though reading the value would work.
It is not a matter of the browser but of the used markup parser. But even
if writing or reading the property would work there, it would accomplish
nothing useful, given that the languages in question are largely incompatible.
>I don't think there's any way to get the literal markup contents of an
element, at least not through the DOM.
[...]
It is possible.
Thanks for the reply Conrad.
Thanks for trimming your quotes next time, especially for not quoting
signatures anymore.

<http://jibbering.com/faq/#FAQ2_3>
The reason I want to get "around it" is that I am using the data to show
the code that actually exists in the div. I have created a (rather
labyrinthine) function that receives the data from the innerHTML
property(?) and transforms it into the raw XHTML so the viewer can see
the code that created the div.
Since the property is called `innerHTML', and not `innerXHTML', on purpose,
and the parsing of `<br/>' like `<br>' by tag-soup parsers is merely based
on false error-correction (correct would have been to parse it the same as
`<br>&gt;'), you cannot solve this with `innerHTML'.

Existing editors have either attempted to correct the false result of
error-corrected markup to XHTML back again (which would involve rather
extensive user-defined parsing), or employed an XML serializer if the
content really is an XHTML fragment.
[...]
[atrocious code snipped]
No, thanks.
PointedEars
--
Use any version of Microsoft Frontpage to create your site.
(This won't prevent people from viewing your source, but no one
will want to steal it.)
-- from <http://www.vortex-webdesign.com/help/hidesource.htm>
Oct 12 '08 #3
On 2008-10-12 19:03, Thomas 'PointedEars' Lahn wrote:
>>[...] In current browsers, even if your document is XHTML, you
can assign what you retrieved from one element's innerHTML
property to another element's innerHTML property without errors.

Of course you cannot. That is only possible when the XHTML markup is
not regarded XHTML but tag soup in the first place.
Did you actually test that? Then give me a counter example where you get
an error when at 'node2.innerHTML = node1.innerHTML'. And yes,
definitely is possible in valid XHTML documents.
There are a number of caveats, of course: copying content in this way
may lead to duplicate id attributes; setting innerHTML on an img element
isn't going to do anything useful; inserting the innerHTML of a tbody
into a div won't create table rows there; etc. But you get the point.
>>Older browsers like Firefox v1 or Safari v? did not support
innerHTML as a setter in XML documents, even though reading the
value would work.

It is not a matter of the browser but of the used markup parser. But
even if writing or reading the property would work there, it would
accomplish nothing useful, given that the languages in question are
largely incompatible.
I was under the impression that the same parser was used for both HTML
and XHTML, only running in different modes. And you can verify for
yourself that using innerHTML as a setter in XHTML documents does in
fact work. Whether you think that's "useful" is up to you.

I assume (without having checked the source), that the value returned by
innerHTML will never be a "tag soup", but the browser's parsed and
prepared representation of the source (X)HTML. The other way around,
when using innerHTML as a setter, the engine will do its best to convert
whatever it's given to a valid (X)HTML fragment.
>>I don't think there's any way to get the literal markup contents
of an element, at least not through the DOM. [...]

It is possible.
How?
Since the property is called `innerHTML', and not `innerXHTML', on
purpose, and the parsing of `<br/>' like `<br>' by tag-soup parsers
is merely based on false error-correction (correct would have been to
parse it the same as `<br>&gt;') [..]
It appears that in current implementations the methods that implement
innerHTML are aware of the document language, and are transparently
converting between HTML and XHTML. At the time when Microsoft created
innerHTML, XHTML was still a few years away from being a standard, which
would explain the name and the way it behaves.
- Conrad
Oct 12 '08 #4
Thanks Conrad and Thomas,

You've helped me understand how much work I have to do. And thanks
for the tip on TagSoup. I had never heard of that and it looks like a
tool that I might use if I can figure out how to use it.

Regards to both,
PaPa
Oct 12 '08 #5
On Oct 12, 3:50*pm, Conrad Lender <crlen...@yahoo.comwrote:
On 2008-10-12 19:03, Thomas 'PointedEars' Lahn wrote:
>[...] In current browsers, even if your document is XHTML, you
can assign what you retrieved from one element's innerHTML
property to another element's innerHTML property without errors.
Of course you cannot. *That is only possible when the XHTML markup is
not regarded XHTML but tag soup in the first place.

Did you actually test that? Then give me a counter example where you get
No need. He is right (at least in the case of several major
browsers.) Don't use innerHTML with an XHTML DOM.
an error when at 'node2.innerHTML = node1.innerHTML'. And yes,
Try it in an XHTML document (a real XHTML document.)

definitely is possible in valid XHTML documents.
Certainly it would have to be a valid XHTML document. You can't even
see invalid ones.
There are a number of caveats, of course: copying content in this way
may lead to duplicate id attributes; setting innerHTML on an img element
isn't going to do anything useful; inserting the innerHTML of a tbody
into a div won't create table rows there; etc. But you get the point.
Those are not the issue at hand.
>
>Older browsers like Firefox v1 or Safari v? did not support
innerHTML as a setter in XML documents, even though reading the
value would work.
Did you test that?
>
It is not a matter of the browser but of the used markup parser. *But
even if writing or reading the property would work there, it would
accomplish nothing useful, given that the languages in question are
largely incompatible.

I was under the impression that the same parser was used for both HTML
and XHTML, only running in different modes. And you can verify for
Aha! Therein lies the basic misconception.
yourself that using innerHTML as a setter in XHTML documents does in
fact work. Whether you think that's "useful" is up to you.
You only thought you were using XHTML and it isn't useful.
>
I assume (without having checked the source), that the value returned by
Always a bad move.
innerHTML will never be a "tag soup", but the browser's parsed and
prepared representation of the source (X)HTML. The other way around,
Sort of.
when using innerHTML as a setter, the engine will do its best to convert
whatever it's given to a valid (X)HTML fragment.
More or less. Except when XML parse mode is in use and then the
browser will likely deny your request with an exception.

[snip]
>
It appears that in current implementations the methods that implement
innerHTML are aware of the document language, and are transparently
converting between HTML and XHTML. At the time when Microsoft created
innerHTML, XHTML was still a few years away from being a standard, which
would explain the name and the way it behaves.
You are lost. In FireFox 3, Tools | Page Info, second item (type.)
What does it say on every page you ever tested with innerHTML?
Oct 13 '08 #6
On 2008-10-12 21:50, Conrad Lender wrote:
>Of course you cannot. That is only possible when the XHTML markup is
not regarded XHTML but tag soup in the first place.

Did you actually test that? Then give me a counter example where you get
an error when at 'node2.innerHTML = node1.innerHTML'. And yes,
definitely is possible in valid XHTML documents.
Yikes, did I really write that? I did some more testing with other
implementations, and there will in fact be errors. That makes three
mistakes in a single paragraph, two grammatical and one factual, so...

....please disregard the whole post. Using innerHTML as a setter in XML
documents is not a good idea.
- Conrad
Oct 13 '08 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: Chris | last post by:
How can I get the innerHTML of a <div> area only when the page loads, then use that variable in a function? Here is my code: function setContent(zz) { var lb =...
7
by: KK | last post by:
Please help! I am currently experiencing a bug in Safari v125.9. When I modify the value of form input box and then get the innerHTML property of the surrounding div object - I am returned the...
6
by: Andrew Poulos | last post by:
Given that I need to be able to add a TYPE attribute when I'm using createElement and it seems to fail in both IE and FF (but not MZ) is it 'safer' to use innerHTML instead? I can dynamically...
4
by: RobG | last post by:
I know you aren't supposed to use innerHTML to mess with table structure, but it seems you can't use it just after a table without damaging the containing element. I added a table to a div using...
9
by: Hallvard B Furuseth | last post by:
Why does the FAQ (Q 4.15) recommend innerHTML when so many here say one should use createElement(), replaceChild() etc? Also, why does the "Alternative DynWrite function" at...
2
by: sveinn | last post by:
Hi all, I've read through this group searching for an answear about this problem. Few have come close but not quite what I need. My problem is this: I'm using Ajax to fetch a new table with...
17
by: PJ | last post by:
Greetings... I have stumbled upon a small problem. I use Ajax to retrieve part of a page I need to update. I update a DIV element with the HTML contents I get from another page. It works...
9
by: martymix | last post by:
simple question: I have a simple <dt>test text</dt> I get the innerHTML of that dt, and I try and append some text to it like so: dt = document.getElementsByTagName('dt') var text =...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: marcoviolo | last post by:
Dear all, I would like to implement on my worksheet an vlookup dynamic , that consider a change of pivot excel via win32com, from an external excel (without open it) and save the new file into a...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.