Closed Thread Icon

Topic awaiting preservation: Appending HTML somewhere.... anywhere... Pages that link to <a href="https://ozoneasylum.com/backlink?for=8357" title="Pages that link to Topic awaiting preservation: Appending HTML somewhere.... anywhere..." rel="nofollow" >Topic awaiting preservation: Appending HTML somewhere.... anywhere...\

 
Author Thread
Petskull
Maniac (V) Mad Scientist

From: 127 Halcyon Road, Marenia, Atlantis
Insane since: Aug 2000

posted posted 10-19-2002 17:59

Let's say we have a DIV...

For whatever damn reason, the 'document.write()' and 'document.writeln()' only work on the whole document... erasing whatever was on the page in the first place...

so, to append another DIV inside this DIV, I have to:

document.all.myDiv.innerHTML = document.all.myDiv.innerHTML + whatEver;

I hate doing this... it seems ugly and slow... is there another way?


Code - CGI - links - DHTML - Javascript - Perl - programming - Magic - http://www.twistedport.com
ICQ: 67751342

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 10-19-2002 18:06

Yeah, document.write only appends to the document if it's executed while the page is still loading.

The true DOM-Compliant way to do it is this:

newDiv = document.createElement('div');
document.getElementById('mydiv').appendChild(newDiv);
// and then, if you want to add text inside the div...
myTextNode = document.createTextNode('hello boys and girls');
newDiv.appendChild(myTextNode);

mobrul
Bipolar (III) Inmate

From:
Insane since: Aug 2000

posted posted 10-22-2002 00:26

OK, that's cool and all.
Now, what to do if I want to add a line (or 10) to an element that already exists?

code:
<a href='JavaScript:void(0);' onclick='addStuff()'>Add a new row</a>
<table id='table1'>
<tr id='row1'>
<td id='row1cell1'>blah</td>
<td id='row1cell2'>blah</td>
<td id='row1cell3'>blah</td>
<td id='row1cell4'>blah</td>
</tr>
</table>


Do I do it like this?

code:
function addStuff(){
newTr = document.createElement('tr');
document.getElementById('table1').appendChild(newTr);
newTd1 = document.createElement('td');
newTd2 = document.createElement('td');
newTd3 = document.createElement('td');
newTd4 = document.createElement('td');
newTr.appendChild(newTd1);
newTr.appendChild(newTd2);
newTr.appendChild(newTd3);
newTr.appendChild(newTd4);
myTextNode = document.createTextNode('this is cell one');
newTd1.appendChild(myTextNode);
myTextNode = document.createTextNode('this is cell two');
newTd2.appendChild(myTextNode);
myTextNode = document.createTextNode('this is cell three');
newTd3.appendChild(myTextNode);
myTextNode = document.createTextNode('this is cell four');
newTd4.appendChild(myTextNode);
}






Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 10-22-2002 01:10

Yeah. It's longer, I know. But you can make use of the return value of Document.CreateElement and Element.appendChild:

newTr.appendChild(document.createElement('td')).appendChild(document.createTextNode("this is cell one"));

And, since all four of your TDs are nearly identical, you should probably use a for loop to generate them anyway.

Note that using these DOM functions can mess up some browsers... IE, specifically, has little quirks here and there.

« BackwardsOnwards »

Show Forum Drop Down Menu