letzte "äussere" DIV clonen

[k3nguruh]

Hallo,

ich versuche das letzte "äussere" DIV zu clonen, habe aber leider absolut keinen Plan wie ich das machen soll. Was ich hinbekommen habe, ist es das 1. DIV zu clonen.

Meine Frage also:
Wie kann ich die Anzahl der "äusseren" DIVs ermitteln bzw. das letzte? Sprich das letzte "<div class="container">"?

function cloneContainer(obj, element) {
    var cloneID = obj.id.replace("btn_", "row_");

    // Anstatt der [0] müsste also das letzte angegeben werden?
    var tmpNode = document.getElementById(cloneID).getElementsByTagName(element)[0].cloneNode(true);

    // Code zum ändern der ID's von label, input, select, textarea, .... fehlt jetzt hier

    document.getElementById(cloneID).appendChild(tmpNode);
}

<div id="row_hausarzt">
<!-- BEGIN row_hausarzt -->
  <div class="container">
    <div class="content">
      <div class="label"><label for="hausarzt_vorname_{row_hausarzt.CNT}">Vorname</label><font class="blue">*</font></div>
      <div class="field"><input{row_hausarzt.E_HAUSARZT_VORNAME} style="width: 238px;" type="text" id="hausarzt_vorname_{row_hausarzt.CNT}" name="hausarzt[vorname][]" value="{row_hausarzt.F_HAUSARZT_VORNAME}" maxlength="50" /></div>
    </div>
    <div class="content">
      <div class="label"><label for="hausarzt_nachname_{row_hausarzt.CNT}">Nachname</label><font class="blue">*</font></div>
      <div class="field"><input{row_hausarzt.E_HAUSARZT_NACHNAME} style="width: 238px;" type="text" id="hausarzt_nachname_{row_hausarzt.CNT}" name="hausarzt[nachname][]" value="{row_hausarzt.F_HAUSARZT_NACHNAME}" maxlength="50" /></div>
    </div>
  </div>
<!-- END row_hausarzt -->
</div>
<div class="container">
  <div class="content">
    <div class="label">&nbsp;</div>
    <div class="field"><button style="width: 100px;" type="button" id="btn_hausarzt" onclick="cloneContainer(this, 'div');">Neue Zeile(n)</button></div>
  </div>
</div>

Bitte nicht durch die {} stören lassen, die kommen vom Template.

Ich hoffe dass ich es verständlich erklärt habe, und mir einer helfen kann. Als Ergebnis sollte dann folgendes rauskommen (gekürzt):

<div id="row_hausarzt">
  <div class="container">
    ....
  </div>
  <div class="container">
    ....
  </div>
  usw.....
</div>

Besten Dank...

 

[Netzwerkidi]

Hai,

Wie kann ich die Anzahl der "äusseren" DIVs ermitteln bzw. das letzte? Sprich das letzte "<div class="container">"?

Vorschlag:

var myDiv = document.getElementsByTagName('div');
  for ( var i=myDiv.length-1; i>0; i-- ) {
    if ( myDiv[i].className == "container" ) {
      if ( myDiv[i].parentNode == document.getElementsByTagName('body')[0] ) {
         alert ( 'Mach ett!!' );
      }
    }
  }

Grüße

 

[k3nguruh]

Erstmal danke für deine Antwort.

Es ist mir aber so, dass ich irgend wo gelesen habe, dass "className" nicht von allen Browsern akzeptiert werden? Ist das was dran?
Mir eigentlich auch egal, wenn Firefox und der IE ab 7.x das kann.

 

[k3nguruh]

Habs dann jetzt erstmal so gemacht.

function cloneContainer(obj, clss) {
    var cloneID = obj.id.replace("btn_", "row_");
    var lastRow = document.getElementById(cloneID).getElementsByClassName(clss).length;
    var tmpNode = document.getElementById(cloneID).getElementsByClassName(clss)[lastRow-1].cloneNode(true);
 
    // Code zum ändern der ID's von label, input, select, textarea, .... fehlt jetzt hier
 
    document.getElementById(cloneID).appendChild(tmpNode);
}

Funktioniert erstmal.

Vll hat aber einer noch ne bessere Lösung?

 

[Netzwerkidi]

http://www.quirksmode.org/dom/w3c_html.html