geclontes div ÜBER Button einfügen

rejoice · 07.02.2011, 22:31

Hallo

per Button clone ich ein DIV
leider wird das eingefügte DIV unter dem Button eingefügt
ich möchte aber dass der Button prinzipiell unter allen DIVS angezeigt wird

ich hab nun schon eine ewigkeit rumgebastelt aber da ich sonst nicht mit javascript arbeite komm ich nicht weiter.

hat jemand eine idee?

das script kann man 'live' auf HIER sehen

der code dazu:

PHP-Code:

  <script type="text/javascript">

<!--

var station=1;

function clone_this(objButton){

station++;

 
  if(objButton.parentNode){    

    tmpNode=objButton.parentNode.cloneNode(true);

    target=objButton.parentNode.parentNode;

    arrInput = tmpNode.getElementsByTagName("input");

    tmpNode.getElementsByTagName("span")[0].innerHTML="<b>Station "+station+"</b>";

 
    for(var i=0; i<arrInput.length; i++){

      if(arrInput[i].type=='text'){

        arrInput[i].value='';

      }

      if(arrInput[i].id=='delete'){

      arrInput[i].type='button';

        arrInput[i].value='Station '+station+' loeschen';

      }

    }

 
    target.appendChild(tmpNode);

  }

}

 
//-->

</script>

 
 
 
<div id='stationen'>

    <div id='frm'>

        <span><b>Station 1</b></span><br/>

        <input name="stationsname[]" type="text"  size="20" maxlength="30" /><br/>

        <input type="hidden" id="delete" value="Station 1 loeschen" onclick="this.parentNode.parentNode.removeChild(this.parentNode)"><br/>

    </div>

</div>

 
 
<input id="insert" type="button" value="weiter Station einfuegen" onclick="clone_this(frm)">

nikosch · 07.02.2011, 22:37

Dann musst Du einen anderen DOM-Befehl als appendChild verwenden..

rejoice · 08.02.2011, 09:37

und welchen DOM-Befehl brauch ich?

nikosch · 08.02.2011, 15:14

Schau in die Liste, so viele gibts nicht. http://selfhtml.org

rejoice · 08.02.2011, 18:44

ich habe nun den befehl insertBefore() gefunden und auch eingebaut. es funktioniert zwar alles wunderbar aber ist es auch so richtig:

PHP-Code:

  <script type="text/javascript">
<!--
var station=1;
function clone_this(objButton){
station++;

  if(objButton.parentNode){    
    tmpNode=objButton.parentNode.cloneNode(true);
    target=objButton.parentNode.parentNode;
    arrInput = tmpNode.getElementsByTagName("input");
    tmpNode.getElementsByTagName("span")[0].innerHTML="<b>Station "+station+"</b>";

    for(var i=0; i<arrInput.length; i++){
      if(arrInput[i].type=='text'){
        arrInput[i].value='';
      }
      if(arrInput[i].id=='delete'){
      arrInput[i].type='button';
        arrInput[i].value='Station '+station+' loeschen';
      }
    }

    target.appendChild(tmpNode);
    
    target.insertBefore(tmpNode, document.getElementById("insert"));
  }
}

//-->
</script>



<div id='stationen'>
    <div id='frm'>
        <span><b>Station 1</b></span><br/>
        <input name="stationsname[]" type="text"  size="20" maxlength="30" /><br/>
        <input type="hidden" id="delete" value="Station 1 loeschen" onclick="this.parentNode.parentNode.removeChild(this.parentNode)"><br/>
    </div>
</div>


<input id="insert" type="button" value="weiter Station einfuegen" onclick="clone_this(frm)">

nikosch · 08.02.2011, 22:12

Nö. Wozu das appendChild?

rejoice · 09.02.2011, 09:12

Zitat:

Zitat von nikosch

Nö. Wozu das appendChild?

in dem besipsiel auf selfhtml war auch appendChild vorhanden:

http://de.selfhtml.org/javascript/ob...#insert_before

Also kann man das weglassen?

Dann habe ich mal noch eine frage:

mein Code:

PHP-Code:

  tmpNode.getElementsByTagName("span")[0].innerHTML="<b>Station "+station+"</b> <img src='../gfx/cross.png' title='Station entfernen' onclick='this.parentNode.parentNode.removeChild(this.parentNode)'>";

dies lasse ich eintragen wenn man das div clont.
das removeChild() wird aber danach nur bei der überschrift angewandt.d.h. das inputfeld bleibt stehen.

wenn ich das

PHP-Code:

  <img src='../gfx/cross.png' title='Station entfernen' onclick='this.parentNode.parentNode.removeChild(this.parentNode)'>

direkt im html code eintrage funktioniert es wie gewünscht und das ganze div wird entfernt.

warum ? ich vertsehe es nicht

siehe dazu das script auf meiner seite: http://test.der-kleine-kurier.de/acp/clonen.php

nikosch · 09.02.2011, 23:53

Zitat:

in dem besipsiel auf selfhtml war auch appendChild vorhanden:

Dort wird der Node auch nicht in den vorbestimmten DOM-Zweig eingehangen, sondern in einen weiteren Node, der dann erst eingehängt wird.

Zitat:

das removeChild() wird aber danach nur bei der überschrift angewandt.d.h. das inputfeld bleibt stehen.

parent ist auch das span, nichts anders. Btw. ist span keine Überschrift.

BlackScorp · 10.02.2011, 08:25

jquery Lib downloaden und folgende form beachten:

PHP-Code:

  <form action="" method="post">

<div id="input">

 
</div>

<input type="submit" />

</form>

und dann halt immer mit appendTo("#input") inhalte hinzufügen..

rejoice · 10.02.2011, 09:19

nun funktioniert es mit innerhtml:

PHP-Code:

  <img src='../gfx/cross.png' title='Station entfernen' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)'>

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
&quot;Submit&quot; Button in anderem Frame erzeugen	skerge12	PHP Tipps 2010	12	19.10.2010 11:59
[Erledigt] MYSQL update über Button	frustrated	PHP Tipps 2010	4	02.03.2010 20:13
Element erstellen, in Quelltext einfügen und auf dieses zugreifen können	R4v3r	JavaScript, Ajax und mehr	8	18.12.2009 11:33
Login.php in index.html einfügen - Fehler!?	bayway	HTML, Usability und Barrierefreiheit	6	10.09.2009 22:50
Login in HTML einfügen - Fehler!	bayway	Beitragsarchiv	1	09.09.2009 21:47
Projekt: User über Intranetpage erstellen, auf einen VoIP-Server	beta1234	PHP Tipps 2009	2	22.07.2009 13:21
Tabelle über Ajax nachladen dauert	pilot323	JavaScript, Ajax und mehr	24	24.06.2009 16:17
[Erledigt] Einzelnen DB-Eintrag über ID anzeigen	Knutschi	PHP Tipps 2009	6	26.03.2009 09:56
[Erledigt] Beibehalten eines JS-Zustands über PHP	louis	PHP Tipps 2008	26	30.10.2008 09:29
Reset Button bei Formularen	TeazY	PHP Tipps 2008	2	24.12.2007 14:59
Variablen in neues Formular über Button oder Link übergeben		PHP Tipps 2005-2	1	15.07.2005 23:10
[Erledigt] Import einer *.sql-Datei über den mysql-client		Datenbanken	2	25.05.2005 19:03
lässt sich nix in meine mysql datenbank über script einfügen		PHP Tipps 2005	8	17.04.2005 19:41
Umleitung über Meta-Angaben im Header abhängig vom Host		PHP Tipps 2004	7	14.06.2004 12:34

07.02.2011, 22:31
rejoice Benutzer Registriert seit: 23.10.2009 Beiträge: 93 PHP-Kenntnisse: Anfänger	geclontes div ÜBER Button einfügen Hallo per Button clone ich ein DIV leider wird das eingefügte DIV unter dem Button eingefügt ich möchte aber dass der Button prinzipiell unter allen DIVS angezeigt wird ich hab nun schon eine ewigkeit rumgebastelt aber da ich sonst nicht mit javascript arbeite komm ich nicht weiter. hat jemand eine idee? das script kann man 'live' auf HIER sehen der code dazu: PHP-Code: <script type="text/javascript"> <!-- var station=1; function clone_this(objButton){ station++; if(objButton.parentNode){ tmpNode=objButton.parentNode.cloneNode(true); target=objButton.parentNode.parentNode; arrInput = tmpNode.getElementsByTagName("input"); tmpNode.getElementsByTagName("span")[0].innerHTML="<b>Station "+station+"</b>"; for(var i=0; i<arrInput.length; i++){ if(arrInput[i].type=='text'){ arrInput[i].value=''; } if(arrInput[i].id=='delete'){ arrInput[i].type='button'; arrInput[i].value='Station '+station+' loeschen'; } } target.appendChild(tmpNode); } } //--> </script> <div id='stationen'> <div id='frm'> <span><b>Station 1</b></span><br/> <input name="stationsname[]" type="text" size="20" maxlength="30" /><br/> <input type="hidden" id="delete" value="Station 1 loeschen" onclick="this.parentNode.parentNode.removeChild(this.parentNode)"><br/> </div> </div> <input id="insert" type="button" value="weiter Station einfuegen" onclick="clone_this(frm)">


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

07.02.2011, 22:37
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Dann musst Du einen anderen DOM-Befehl als appendChild verwenden.. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

08.02.2011, 09:37
rejoice Benutzer Registriert seit: 23.10.2009 Beiträge: 93 PHP-Kenntnisse: Anfänger	und welchen DOM-Befehl brauch ich?

08.02.2011, 15:14
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Schau in die Liste, so viele gibts nicht. http://selfhtml.org __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

08.02.2011, 18:44
rejoice Benutzer Registriert seit: 23.10.2009 Beiträge: 93 PHP-Kenntnisse: Anfänger	ich habe nun den befehl insertBefore() gefunden und auch eingebaut. es funktioniert zwar alles wunderbar aber ist es auch so richtig: PHP-Code: <script type="text/javascript"> <!-- var station=1; function clone_this(objButton){ station++; if(objButton.parentNode){ tmpNode=objButton.parentNode.cloneNode(true); target=objButton.parentNode.parentNode; arrInput = tmpNode.getElementsByTagName("input"); tmpNode.getElementsByTagName("span")[0].innerHTML="<b>Station "+station+"</b>"; for(var i=0; i<arrInput.length; i++){ if(arrInput[i].type=='text'){ arrInput[i].value=''; } if(arrInput[i].id=='delete'){ arrInput[i].type='button'; arrInput[i].value='Station '+station+' loeschen'; } } target.appendChild(tmpNode); target.insertBefore(tmpNode, document.getElementById("insert")); } } //--> </script> <div id='stationen'> <div id='frm'> <span><b>Station 1</b></span><br/> <input name="stationsname[]" type="text" size="20" maxlength="30" /><br/> <input type="hidden" id="delete" value="Station 1 loeschen" onclick="this.parentNode.parentNode.removeChild(this.parentNode)"><br/> </div> </div> <input id="insert" type="button" value="weiter Station einfuegen" onclick="clone_this(frm)">

08.02.2011, 22:12
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Nö. Wozu das appendChild? __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

10.02.2011, 08:25
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	jquery Lib downloaden und folgende form beachten: PHP-Code: `<form action="" method="post"> <div id="input"> </div> <input type="submit" /> </form>` und dann halt immer mit appendTo("#input") inhalte hinzufügen.. __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen

10.02.2011, 09:19
rejoice Benutzer Registriert seit: 23.10.2009 Beiträge: 93 PHP-Kenntnisse: Anfänger	nun funktioniert es mit innerhtml: PHP-Code: `<img src='../gfx/cross.png' title='Station entfernen' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)'>`