Need cross-platform DOM manipulation help (larger JS app)

lorlarz · Jul 15, 2009

Hi fellow JS application programmers

I have an online html-page outline maker which has one function
(editTop() )
which works only in Firefox and not IE. I have tried about
everything
I can think of in a hour to make it work in IE, but have failed in
that
hour.

I would appreciate if someone interested in dom node manipulating JS
apps could take a look at the editTop() function and propose
solutions.
All the code is in the head of the web page:
http://nottoolate.info/outlineMaker.htm

(Please do not bother too much to criticize needless global variables
or curly braces that do not line up -- I know, I know. The problem
is
just in the editTop() function so the formatting of such a limited
area
should not cause too much distress.)

Thanks in advance.

Larz

Richard Cornford · Jul 15, 2009

Hi fellow JS application programmers

I have an online html-page outline maker which has one
function (editTop() )
which works only in Firefox and not IE. I have tried
about everything I can think of in a hour to make it
work in IE, but have failed in that hour.

If you are short on the fundamentals of the technology then an hour
does not seem like much time to devote to rectifying that.

I would appreciate if someone interested in dom node
manipulating JS apps could take a look at the editTop()
function and propose solutions.
All the code is in the head of the web page:
http://nottoolate.info/outlineMaker.htm

From your page:-

| <?xml version = "1.0" encoding = "utf-8"?>
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
| "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Don't try to fool yourself (or anyone else) that you are using XHTML,
you are serving your page with a text/html content-type so the browser
will be interpreting it as tag soup HTML and building an HTML DOM for
you to script (and as IE does support interpreting documents as XHTML
or providing XHTML DOMS to be scripted you will not changing that in
the foreseeable future).

(Oh, and the page as it is does not satisfy XML's well-formed-ness
rules so it is never going to validate as XHTML anyway)

| function editTop() {
| ....
| if(currentNode.innerHTML.indexOf("<d")) {

The value retrieved from the innerHTML property is a serialisation of
the DOM branch. On IE the rules that do the serialisation use the same
value as the DOM node's - nodeName - property as the value it uses in
the tag names in the resulting mark-up, and because HTML is case
insensitive the W3C HTML DOM specification requires the - nodeName -
properties to be the uppercase representation of the tag name. Thus
the lower case 'd' in the string above guarantees that no match will
be found in any HTML Element node's - innerHTML - values on IE.

(Please do not bother too much to criticize needless
global variables or curly braces that do not line up
-- I know, I know.

If you cannot be bothered to render your code readable before asking
people to read it you will tend to generate a negative impression.

The problem is just in the editTop() function so the
formatting of such a limited area
should not cause too much distress.)

<snip>

It might still encourage people to stop looking at it after seeing the
first fatal error, and so not go on to consider what may (or may not)
happen if that first error were fixed.

Richard.

lorlarz · Jul 15, 2009

On Jul 15, 2:46 pm, lorlarz wrote:
[snip]
(Oh, and the page as it is does not satisfy XML's well-formed-ness
rules so it is never going to validate as XHTML anyway)

| function editTop() {
| ....
| if(currentNode.innerHTML.indexOf("<d")) {

The value retrieved from the innerHTML property is a serialisation of
the DOM branch. On IE the rules that do the serialisation use the same
value as the DOM node's - nodeName - property as the value it uses in
the tag names in the resulting mark-up, and because HTML is case
insensitive the W3C HTML DOM specification requires the - nodeName -
properties to be the uppercase representation of the tag name. Thus
the lower case 'd' in the string above guarantees that no match will
be found in any HTML Element node's - innerHTML - values on IE.
[snip]

Richard.

Richard

If IE does it just like Firefox, why does the code not work on IE?
You begged
the question, that's all.

Larz

lorlarz · Jul 15, 2009

On Jul 15, 2:46 pm, lorlarz wrote:
[snip]
(Oh, and the page as it is does not satisfy XML's well-formed-ness
rules so it is never going to validate as XHTML anyway)

Click to expand...

| function editTop() {
| ....
| if(currentNode.innerHTML.indexOf("<d")) {

Click to expand...

The value retrieved from the innerHTML property is a serialisation of
the DOM branch. On IE the rules that do the serialisation use the same
value as the DOM node's - nodeName - property as the value it uses in
the tag names in the resulting mark-up, and because HTML is case
insensitive the W3C HTML DOM specification requires the - nodeName -
properties to be the uppercase representation of the tag name. Thus
the lower case 'd' in the string above guarantees that no match will
be found in any HTML Element node's - innerHTML - values on IE.
[snip]

Richard.

Click to expand...

Richard

If IE does it just like Firefox, why does the code not work on IE?
You begged
the question, that's all.

Larz- Hide quoted text -

- Show quoted text -

P.S. It might be good for those who want to actually help
wirh the editTop function of my program
to run it on IE and see what happens (new contenc is added
but old content still remains, though I cannot see why or how)

Thanks to any helpful people out there in advance.

-- Larz

Richard Cornford · Jul 15, 2009

On Jul 15, 9:43 am, Richard Cornford wrote:

If IE does it just like Firefox, why does the code not work on IE?
You begged the question, that's all.

IE is not like Firefox. Firefox's DOM serialisation rules use
lowercase tag names in its mark-up output for the values of -
innerHTML -.

Richard.

Martin Honnen · Jul 15, 2009

lorlarz said:
I have an online html-page outline maker which has one function
(editTop() )
which works only in Firefox and not IE. I have tried about
everything
I can think of in a hour to make it work in IE, but have failed in
that
hour.

I would appreciate if someone interested in dom node manipulating JS
apps could take a look at the editTop() function and propose
solutions.
All the code is in the head of the web page:
http://nottoolate.info/outlineMaker.htm

You might better explain first what you want to achieve with that
function, then we can suggest a way to achieve that in a cross browser
manner.

I think one of the reasons why you get different results is the use of
the not standardized substr method with a negative argument, see
https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String/substr

John G Harris · Jul 15, 2009

On Wed, 15 Jul 2009 at 09:57:33, in comp.lang.javascript, lorlarz wrote:

Thanks to any helpful people out there in advance.

You're welcome.

John

lorlarz · Jul 15, 2009

You might better explain first what you want to achieve with that
function, then we can suggest a way to achieve that in a cross browser
manner.

I think one of the reasons why you get different results is the use of
the not standardized substr method with a negative argument, seehttps://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global...

Martin,

What I want to achieve is what the function does (properly)
when the program is run in Firefox and the Edit Top Item
button is pressed. That is what I would like it to do in IE.
(In IE old content is inexplicably retained.)
The program (and code -- all on the page) is at:
http://mynichecomputing.org/outlineMaker.htm

Thanks.

Larz

RobG · Jul 16, 2009

On Jul 15, 2:46 pm, lorlarz wrote:
[snip]
(Oh, and the page as it is does not satisfy XML's well-formed-ness
rules so it is never going to validate as XHTML anyway)

Click to expand...

| function editTop() {
| ....
| if(currentNode.innerHTML.indexOf("<d")) {

Click to expand...

The value retrieved from the innerHTML property is a serialisation of
the DOM branch. On IE the rules that do the serialisation use the same
value as the DOM node's - nodeName - property as the value it uses in
the tag names in the resulting mark-up, and because HTML is case
insensitive the W3C HTML DOM specification requires the - nodeName -
properties to be the uppercase representation of the tag name. Thus
the lower case 'd' in the string above guarantees that no match will
be found in any HTML Element node's - innerHTML - values on IE.

Click to expand...

[snip]

If IE does it just like Firefox, why does the code not work on IE?
You begged
the question, that's all.

No, he didn't - that's not what "begging the question" means[1].
Nowhere was it stated that "IE does it just like Firefox" (where "it"
is convert a section of the DOM to the value an innerHTML property).

I wouldn't expect Richard to have made that statement either: not only
is it trivial to disprove it, but he explained one of the differences.

1. <URL: http://en.wikipedia.org/wiki/Begging_the_question >

My sliding panel in React Js with graphs on it renders nothing but a blank screen--need help	0	Dec 9, 2019
I need help making a zooming function	11	Dec 14, 2021
I need help in understanding these files on my phone, Could someone help me understand these files? Urgent help needed. Please help.	3	Jun 4, 2023
Help with code	0	Jun 12, 2022
Image colour manipulation using JS	10	Jun 21, 2006
XPath, XMLHttpRequest and parsing DOM	4	Aug 8, 2011
IE6 dom manipulation onSubmit fails	2	Mar 29, 2006
JS, DOM and tr... IE problems!	5	Nov 18, 2006

Need cross-platform DOM manipulation help (larger JS app)

lorlarz

Richard Cornford

lorlarz

lorlarz

Richard Cornford

Martin Honnen

John G Harris

lorlarz

RobG

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads