Clear out an html dom object

[Lan Mind]

Hello all,

In a javascipt function I am adding the variable "side_bar_html" to an
html object's innerHTML like so:

document.getElementById("side_bar").innerHTML = side_bar_html;

Now say before I do this I want to "clear out" or "delete" the current
innerHTML. Is there a simple way to do this?

 

[Jeremy J Starcher]

Hello all,

In a javascipt function I am adding the variable "side_bar_html" to an
html object's innerHTML like so:

document.getElementById("side_bar").innerHTML = side_bar_html;

Now say before I do this I want to "clear out" or "delete" the current
innerHTML. Is there a simple way to do this?

Setting innerHTML will replace the current contents, so there is no need
to delete.

That said, you might want to detach any event handlers if set. IIRC,
this is one of (many) sources of memory leaks.

Beware that InnerHTML does not always work "as expected."

 

[Lan Mind]

Setting innerHTML will replace the current contents, so there is no need
to delete.

On my page here it doesn't replace whats there. For example type shell
into the textbox and hit submit. Then type exxon and submit. It simply
adds to the current innerHTML and doesn't replace. Is there something
different I could do?

http://dockhawk.com/

 

[pr]

On my page here it doesn't replace whats there. For example type shell
into the textbox and hit submit. Then type exxon and submit. It simply
adds to the current innerHTML and doesn't replace. Is there something
different I could do?

http://dockhawk.com/

Looks to me like you never reset side_bar_html to "", so it will contain
all of the HTML you have accumulated.

 

[Jeremy J Starcher]

On my page here it doesn't replace whats there. For example type shell
into the textbox and hit submit. Then type exxon and submit. It simply
adds to the current innerHTML and doesn't replace. Is there something
different I could do?

http://dockhawk.com/

innerHTML does exactly what you asked it to do ...

You never reset sidebar_html to an empty string, so it will contain both
shell and exxon.

For debugging: Make sure variables contain what you think they should
contain. Firebug works very well and has logging options. For "quick-
and-dirty" tests, put in an alert(sidebar_html) and make sure its value
is sane.

You will spare yourself grief later on if you set a valid HTML 4.01
strict doctype and get ride of that CDATA stuff then validate your page.

 

[Lan Mind]

Thanks for all the great tips Jeremy & pr. I have a few questions.

Jeremy said:
****************************************************

Beware that InnerHTML does not always work "as expected."

Do you know of any examples I could look at to understand it not
working "as expected"?

You will spare yourself grief later on if you set a valid HTML 4.01

strict doctype and get ride of that CDATA stuff then validate your
page.

Do you know exactly what the CDATA stuff is there for? I have it on my
page because in examples I've been using on the various interwebz
it's, well just there : ) I don't know why it's there.

So I have reset the side_bar_html to an empty string towards the end
of the getmarks() function like so:


....
document.getElementById("side_bar").innerHTML = side_bar_html;

}
}
}
request.send(null);
side_bar_html = "";
}
....

Do you think this is an appropriate place to set side_bar_html back to
an empty string? It's working now but I'm just curious if there's a
more beneficial way. Link: http://dockhawk.com/

Thanks for all- Lan

 

[Thomas 'PointedEars' Lahn]

Jeremy said:

Do you know of any examples I could look at to understand it not
working "as expected"?

strict doctype and get ride of that CDATA stuff then validate your
page.

Unless this is a Google Groups bug, please don't manually wrap quotes. That
said, you should avoid GG for posting.

Do you know exactly what the CDATA stuff is there for? I have it on my
page because in examples I've been using on the various interwebz
it's, well just there : ) I don't know why it's there.

As the content model of XHTML `script' (and `style') elements is PCDATA, the
CDATA declaration is required for the content if it contains one or more of
`<', `>', and `&', and you don't want to escape them with `&lt;', `&gt;',
and `&amp;', respectively.

The recommended alternative to both is to include "external" script
resources with the `src' attribute, and "external" stylesheet resources with
an xml-stylesheet declaration before the DOCTYPE declaration
(link[rel="stylesheet"] elements in properly served XHTML are not supposed
to work).

http://www.w3.org/TR/xhtml1/

The BCP to avoid those and several other issues is to avoid serving XHTML
unless absolutely necessary:

http://hsivonen.iki.fi/xhtml-the-point/
http://hixie.ch/advocacy/xhtml
http://www.spartanicus.utvinternet.ie/no-xhtml.htm

[...]So I have reset the side_bar_html to an empty string towards the end
of the getmarks() function like so:

...
document.getElementById("side_bar").innerHTML = side_bar_html;

This combination is error-prone if untested at runtime, see recent discussions.


PointedEars

 

[Richard Cornford]

Jeremy said:

Do you know exactly what the CDATA stuff is there for? I have
it on my page because in examples I've been using on the
various interwebz it's, well just there : ) I don't know why
it's there.

<snip>

It is a mystical incantation. These things persist in web development
because people who don't know what they are doing write examples and other
people read those examples, assume the things they see are there for a
reason, and copy them, and later they writer their own examples including
the things that they have seem elsewhere but never understood. And so on
through time, with the accumulation of typos and like adding a 'Chinese
whispers' effect.

There are many mystical incantations in common use in web development. If
you don't know why you are doing something it can be a good idea to ask
someone who might know (and a better idea to do so in a public place so you
won't end up just learning their mystical incantations).

Richard.

 

[Thomas 'PointedEars' Lahn]

Jeremy said:
Do you know exactly what the CDATA stuff is there for? I have
it on my page because in examples I've been using on the
various interwebz it's, well just there : ) I don't know why
it's there.

<snip>

It is a mystical incantation. [...]

IBTD. In *XHTML*, it certainly isn't.


PointedEars

 

[Lan Mind]

lol thanks you two, I will be going over all discussed.

 

[Richard Cornford]

Jeremy said:

You will spare yourself grief later on if you set a valid
HTML 4.01 strict doctype and get ride of that CDATA stuff
then validate your page.
Do you know exactly what the CDATA stuff is there for? I have
it on my page because in examples I've been using on the
various interwebz it's, well just there : ) I don't know why
it's there.

<snip>

It is a mystical incantation. [...]

IBTD. In *XHTML*, it certainly isn't.

But the OP is writing to - innerHTML - with visible consequences so this is
absolutely not an XHTML document. That also means that any CDATA noise
inside script elements will be 'commented out' with javascript or HTML-like
comment delimiters of some sort, and that itself is a mystical incantation
in an XML/XHTML context (they must be 'commented out' else the CDATA noise
would produce script errors in the HTML context that can be inferred from
the 'successful' use of - innerHTML -).

Richard.

 

[Thomas 'PointedEars' Lahn]

Lan Mind wrote:
Jeremy said:
<snip>
You will spare yourself grief later on if you set a valid
HTML 4.01 strict doctype and get ride of that CDATA stuff
then validate your page.
Do you know exactly what the CDATA stuff is there for? I have
it on my page because in examples I've been using on the
various interwebz it's, well just there : ) I don't know why
it's there.
<snip>

It is a mystical incantation. [...]

IBTD. In *XHTML*, it certainly isn't.

But the OP is writing to - innerHTML - with visible consequences so this is
absolutely not an XHTML document. That also means that any CDATA noise
inside script elements will be 'commented out' with javascript or HTML-like
comment delimiters of some sort, and that itself is a mystical incantation
in an XML/XHTML context (they must be 'commented out' else the CDATA noise
would produce script errors in the HTML context that can be inferred from
the 'successful' use of - innerHTML -).

Your assumption is not necessarily a correct one. `innerHTML' also works in
XHTML served as text/html, because of its being parsed as tag-soup HTML.
The CDATA declaration could have been automatically included by a tool that
the OP is using, in order to help them create a Valid XHTML document.

It is possible that the OP (maybe unknowingly) serves the same document as
application/xhtml+xml to one user agent (where they would use DOM Level 2
mutator methods) and as text/html to another (where they could use
`innerHTML'). It would then make sense to script-comment out what the HTML
tag-soup parser would pass as-is to the script engine which would consider
it a syntax error.

But, more important, the validity of an XHTML document, although invalidity
probably would have little consequence if served as text/html, does not
depend on by which parser the document is parsed in the HTML user agent.
Removing the declaration without changing the document type to HTML could
render the document invalid.


Regards,

PointedEars

 

[pr]

Thanks for all the great tips Jeremy & pr. I have a few questions.

Jeremy said:
****************************************************

Do you know of any examples I could look at to understand it not
working "as expected"?

Well, that depends on what one expects, of course. But in addition to
the instance (an XHTML document) discussed, you could Google this group
for examples of these:

1. Evaluating innerHTML: browsers produce very different markup
representations of an element, so it isn't safe to expect comparable
results from innerHTML in different browsers.

2. Tables: IE doesn't permit you to replace <table> element content or
rows using innerHTML and you are usually better served - in any browser
- by table object model (eg. insertRow()) or the usual DOM 2.0 methods.

3. Deleting content: you can get unexpected results if you delete
content with innerHTML = "" if a variable refers to one of the nodes
removed and you subsequently try to access that variable. This isn't a
problem using the removeChild() method.

There are no doubt a few more.

strict doctype and get ride of that CDATA stuff then validate your
page.

I agree with that.
[...]

So I have reset the side_bar_html to an empty string towards the end
of the getmarks() function like so:
...
document.getElementById("side_bar").innerHTML = side_bar_html;

}
}
}
request.send(null);
side_bar_html = "";
}
...

Do you think this is an appropriate place to set side_bar_html back to
an empty string? It's working now but I'm just curious if there's a
more beneficial way. Link: http://dockhawk.com/

I'd put it at the top of that function, just after the variable
declaration, so setting the variable to "" occurs (visually) ahead of
the function calls that set it to a string of markup in the event
listener. That would make the code easier to understand and would
correct the misleading impression given by request.send() appearing the
line before you reset the global variable.