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 createElement methods, then added a bit
of extra text using innerHTML, only to find most of the attributes
removed from the table.
Below is a script that calls the same code to add a table inside a
div. It adds an onclick to the div and change the style. When it is
called without an extra bit of innerHTML, all is fine. But if
innerHTML is also used, the background-color is removed as is the onclick.
I know there's no spec for innerHTML, but the above behaviour happens
on IE & Firefox Windows as well as Firefox & Safari Mac.
It doesn't seem to happen if a div is used instead of a table. Is
this a known effect of innerHTML?
<script type="text/javascript">
function addDiv ( el, b ) {
var oT = document.create Element( 'table' );
var oTb = document.create Element( 'tbody' );
var oTr = document.create Element( 'tr' );
var oTd = document.create Element( 'td' );
oTd.appendChild ( document.create TextNode( 'text added to table' ) );
oTd.style.backg roundColor = '#ddddff';
oTr.appendChild ( oTd );
oTb.appendChild ( oTr );
oT.appendChild( oTb );
oT.onclick = sayHi;
el.appendChild( oT );
if ( b ) el.innerHTML += 'Here\'s some more text';
}
function sayHi(){
alert( 'Hi from ' + this.nodeName );
}
</script>
<div onclick="addDiv ( this, false );">click me 1</div>
<div onclick="addDiv ( this, true );">click me 2</div>
--
Rob 4  6552 
RobG wrote: 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 createElement methods, then added a bit
of extra text using innerHTML, only to find most of the attributes
removed from the table.
I guess that the removed attributes are JavaScript functions and
listeners.
Change you "extra text" block to this:
if (b) {
var txt = document.create Element('SPAN') ;
txt.innerHTML = 'Here\'s some more text';
el.appendChild( txt);
}
and it will work again. Somewhere there was a link about JavaScript
inserted as a text stream. It doesn't get parsed in such case.
And your instruction DOMNode+text transforms it into text stream. Just
a wild guess but seems to be true.
RobG wrote: oT.onclick = sayHi;
if ( b ) el.innerHTML += 'Here\'s some more text';
When you do that el.innerHTML += ...
you are not (just) adding to el, you are completely redefining it.
That is, el.innerHTML += ... means:
el.innerHTML = el.innerHTML + ...
and if some property is not sitting in the innerHTML, when you redefine
it (that is, a property of el or any of its sub elements), by means of
setting its innerHTML), it's gone.
To that end, it may be instructive to actually see what that innerHTML
is. Redefine your oT.onclick like so:
oT.onclick = function(el) {return function() {
alert('Hi from ' + this.nodeName + "\n" + el.innerHTML); } } (el);
Good luck,
Csaba Gabor from Vienna
VK wrote: and it will work again. Somewhere there was a link about JavaScript
inserted as a text stream. It doesn't get parsed in such case.
On IE 6, the following will be injected and parsed. However, IE will
then claim that: Internet Explorer cannot open the Internet site ...
Operation aborted (ed: dummy, you've already loaded it) and unload it
in front of your eyes.
<body>
<script type='text/javascript'>
function scriptInjector( ) {
myscript = document.create Element('script ');
myscript.type = 'text/javascript';
document.docume ntElement.appen dChild(myscript );
myscript.text =
"alert('scr ipt has been parsed injected and parsed');"
}
scriptInjector( );
</script>
</body>
However, take out the scriptInjector( ) call and change the <body> to
<body onload="scriptI njector()"> as below, and the script works just
fine for me on my Win XP Pro system:
<body onload="scriptI njector()">
<script type='text/javascript'>
function scriptInjector( ) {
myscript = document.create Element('script ');
myscript.type = 'text/javascript';
document.docume ntElement.appen dChild(myscript );
myscript.text =
"alert('scr ipt has been parsed injected and parsed');"
}
</script>
</body>
With Firefox, version Deer Park Alpha 1 both versions work without
error.
Go figure,
Csaba Gabor from Vienna
Csaba Gabor wrote: RobG wrote:
oT.onclick = sayHi;
if ( b ) el.innerHTML += 'Here\'s some more text';
When you do that el.innerHTML += ...
you are not (just) adding to el, you are completely redefining it.
That is, el.innerHTML += ... means:
el.innerHTML = el.innerHTML + ...
and if some property is not sitting in the innerHTML, when you redefine
it (that is, a property of el or any of its sub elements), by means of
setting its innerHTML), it's gone.
To that end, it may be instructive to actually see what that innerHTML
is. Redefine your oT.onclick like so:
oT.onclick = function(el) {return function() {
alert('Hi from ' + this.nodeName + "\n" + el.innerHTML); } } (el);
It appears to be that when you add an onclick event to any element using
DOM, it is not added to its innerHTML. When you modify the innerHTML of
the element's parent, the element is written out again, without the
onclick attribute (this seems to be consistent for any intrinsic event)
effectively removing it.
While I originally thought it only happened with tables, with further
testing it appears that the same thing happens with other elements too -
intrinsic events are not included in the innerHTML if they aren't in the
original HTML source and have been added using some other method.
It does not seem to happen with other element attributes - style, id,
name, etc. nor does it happen if you modify the innerHTML of the element
itself, nor if you add the event using innerHTML (I guess that's
obvious, but...).
It's just a gotcha with innerHTML that I was not aware of before.
I can only guess that dynamically attached events are not included in an
elements' innerHTML because they may be added using a number of methods
and that some may be anonymous functions. But in that case I would have
thought that the function body would become the onclick attribute:
script: oT.onclick = function() { alert('hi'); };
==> innerHTML: ... onclick="alert( 'hi');" ...
and so on. Is this why the W3C has not added an innerHTML-type method
to the DOM?
--
Rob This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
by: Kyle |
last post by:
I am presently making use of documentElement.innerHTML to retrieve
page contents for manipulation, but I've noticed that the sting value
returned is not identical to the actual page source. Specifically,
attribute assignments that look like:
height=100 width=100
in the real source, look like:
height="100" width="100"
|
by: necromonger |
last post by:
Hi,
I've got this code that creates a new new row and cell. I then put some
text into the cell with innerHTML - works beautifully with Firefox but
fails with IE. I guess IE doesn't support this way of doing it, but is
there another way of doing it with DOM?
newr = document.createElement('tr');
stbl.appendChild(newr);
|
by: wk |
last post by:
i have a <table></table> ...and the have a string with the html that
will create the table rows, columsn etc....perhaps <tr><td>a
row</td></tr>.
this string comes dynamically from a source and can vary immensly.
How can i use javascript to build the table from this string? I
understand i cannot use innerHTML in a table :(
|
by: Andrew Phillipo |
last post by:
I have some code that works everywhere but IE5.0, including IE5.5.
Here is a snippet of where the code seems to go wrong:
Location.prototype.change = function(current) {
this.current = current; // refers to the currently selected estate
agent
var elem = dhtml_get_element(this.id()); // cross browser
getElementById
var oldElem = elem.parentNode; // we can't replace tables using
innerHTML - get the parent element (a div)
|
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
<http://www.jibbering.com/faq/faq_notes/alt_dynwrite.html> need
such a lot of tests to find out if innerHTML assignment actually
works, instead of just inserting <span id="strange name"></span>
and checking if the document now contains an element with that ID?
| | |
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 input
boxes. I then take
the innerHTML from my <div> and add the new table to the existing
one/s.
What happens in FireFox is that all values in other tables input boxes
|
by: ilia |
last post by:
Hi All,
I am a newbie in terms of Javascript, I found some code on the net to swap rows in a table using innerHTML, this works fine in Firefox but IE is complaining, after some googling around I found that innerHTML is read only for tables in IE which is a problem, please see my code below.
I need urgent help if anyone has an idea or a helpfull link, any help will be greatly appreciated!
PS: dont mind the PHP
CODE BELOW ---
<?php
|
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 = dt.innerHTML + 'new'
in Firefox, I get "test textnew"
|
by: David Gillen |
last post by:
Hello,
I'm hoping someone can shed some light on this, problem is in IE6 and 7. FF is
okay.
I have within my html
<tbody id="dataTable" name="dataTable"></tbody>
And then some javascript (using prototype to get the element)
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
| | |
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| | |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
