DOM hierarchy with HTML first? 2

[Sleidia]

Hi guys

How would you create a DOM hierarchy with HTML first, so that you can manipulate it later with Javascript?

For example, here is a sample of a table :

...

<tr id="row_1">
<td> This is a root row </td>
</tr>

    <tr id="row_2">
    <td> This should be a child of row_1 </td>
    </tr>

    <tr id="row_3">
    <td> This should be another child of row_1 </td>
    </tr>
    
        <tr id="row_4">
        <td> This should be a child of row_3 </td>
        </tr>

<tr id="row_5">
<td> This is another root row </td>
</tr>

    <tr id="row_6">
    <td> This should be a child of row_5 </td>
    </tr>

...

What I want is to have all the childs of row_1 get deleted when I dynamically delete row_1 with removeChild().

Instead of a table, is the use of nested divs the only way to go?

Thanks for the help !

 

[BabyJeffy]

Use nested divs, definitely.

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

What is Javascript? FAQ216-6094

 

[Sleidia]

Thanks BabyJeffy !

I ended up using divs finally.

By chance, would you know how to dynamically add more div elements inside a parent div?

</div>
...

( elem_add( 'before' , 3) would add div number 4 here )

<div id="3">

    <div id="some_sub_div_1"></div>
    <div id="some_sub_div_2"></div>

( elem_add( 'inside' , 3) would add div number 4 here )

</div>

( elem_add( 'after' , 3) would add div number 4 here )

<div>

...

This is this function of mine that I have to tweak to enable the "inside" feature :

function elem_add ( method , this_num ) {

parent_id = 'node_' + this_num;

    if ( !node_num ) var node_num = document.getElementById( 'root' ).getElementsByTagName( 'div' ).length; 

node_num++;

    if ( method == 'before' ) {
    
    var next_elem = document.getElementById( parent_id );
    
    }
    
    if ( method == 'inside' ) {
    
    ???
    
    }    
        
    if ( method == 'after' ) {
    
    var next_elem = document.getElementById( parent_id ).nextSibling;
    
    }

var parent_node = document.getElementById( parent_id ).parentNode;
var div = document.createElement( 'div' );

div.setAttribute( 'id' , 'node_' + node_num );

parent_node.insertBefore( div , next_elem );

document.getElementById( 'node_' + node_num ).innerHTML = 'something here';

}

 

[Sleidia]

Well ... I found it !

To those who may be interested ... :

function elem_div_add ( method , parent_num , div_content ) {

parent_id = 'node_' + parent_num;

    if ( !node_num ) var node_num = document.getElementById( 'root' ).getElementsByTagName( 'div' ).length; 
    if ( method == 'before' ) var next_elem = document.getElementById( parent_id );
    if ( method == 'after' ) var next_elem = document.getElementById( parent_id ).nextSibling;

node_num++;

var div = document.createElement( 'div' );
div.setAttribute( 'id' , 'node_' + node_num );

    if ( method == 'inside' ) {
    
    var parent_node = document.getElementById( parent_id );
    parent_node.appendChild( div );
        
    } else {
    
    var parent_node = document.getElementById( parent_id ).parentNode;
    parent_node.insertBefore( div , next_elem );

    }

document.getElementById( 'node_' + node_num ).innerHTML = div_content;

}