Topic awaiting preservation: Appending HTML somewhere.... anywhere...

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

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);

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?

<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?

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);

}

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.