jQuery <div> Container generieren lassen ?

dreamcatcher · 18.02.2011, 12:34

Hallo,

ich suche fast verzweifelt nach einer Methode um mir <div> Container generieren zu lassen.

Nehmen wir als Beispiel, dass man eine Mitgliedsseite hat mit einem Button um neue Mitarbeiter hinzuzufügen.

Bei einem klick auf "add" soll dann automatisch ein entsprechender Container mit einer dynamischen ID und Class generiert werden.

Nun, per jQuery dachte ich kann ich es durch hide() und Show() löshen, geht aber nicht da ich nur auf ein bereits existierendes Element verweisen kann und kein "dynamisches", im Sinne von sich immer änderndes (von der ID her) erstellen kann.

______________
Also das Problem kurz zusammengefasst:

Ich klick auf "add" und ein dynamische Container wird erstellt, auf der Grundlage eines Editfelds.

Im Editfeld steht z.B. 123, dann soll der Container ebenfalls als ID 123 besitzen.

Es ist leicht an die ID zu kommen durch editfeldid.value, allerdings wie kann ich den vordefinierten div Container erstellen ?

Vielen Dank und liebe Grüße

P.S.:
Stichwörter sind natürlich auch erwünscht, Hauptsache weitere Anhalspunkte

Young Jedi · 18.02.2011, 12:40

Guck doch einfach mal in die jQuery Documentation. Es gibt Sachen wie append, prepend, after, before (oder so in der Art... genau hab ich es auch nicht im Kopf)

BlackScorp · 18.02.2011, 12:46

PHP-Code:

  $('button#add').click(function(){

var html = '<div id="'+$('input#eingabe').val()+'">Bla bla<div class="delete"></div></div>';

$('div#content').append(html);

});

 
$('.delete').click(function(){

$(this).parent().remove();

});

so in etwa

dreamcatcher · 23.02.2011, 13:20

Es funktioniert soweit, allerdings kann ich es nicht in eine .js Datei auslagern, soll das so sein ?

PHP-Code:

      $("#append").click(function () {
 
      $('.box').append("<div class='newbox'>I'm new box by append</div>");
 
    });

sobald ich das unter den button stecke in <script> gepackt funktioniert es.

Wenn ich im Head Bereich allerdings eine main.js einbinde und in die main.js das oben geschriebene schreibe, passiert überhaupt nichts

Beispieldateien für das inkludieren:

index.html

PHP-Code:

  <html>
<head>
    
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="main.js"></script>

</head>
<body>
 
  <div class="box">I'm a big box</div>
 
 
  <p>
  <button id="append">append()</button>
  </p>
 
</body>
</html>

main.js

PHP-Code:

  $("#append").click(function () {
      $('.box').append("<div class='newbox'>I'm new box by append</div>");
});

EDIT://

Wenn ich
<script type="text/javascript" src="main.js"></script>
unter den Button schreibe, dann funktioniert es ebenfalls.

Es kann doch aber nicht sein dass ich meine .js Dateien am Ende der HTML Datei inkludieren muss, damit es funktioniert !?

ChrisB · 23.02.2011, 13:38

Du kannst nicht auf HTML-Elemente zugreifen, bevor sie im DOM existieren.

Stichwort: onload, bzw. in jQuery ready.

Das sind übrigens absolute Basics.

dreamcatcher · 23.02.2011, 14:01

Da hatte ich nicht dranne gedacht, na klar...

Dementsprechend dann die Lösung mit document.ready davor... Dank dir

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
jQuery, einem DOM-Knoten eine Payload anhängen	Chriz	JavaScript, Ajax und mehr	6	22.12.2010 15:31
jQuery - Text an Cursorposition einfügen	Koala	JavaScript, Ajax und mehr	5	11.11.2010 21:28
nur ausgewählten div Container neu laden - jQuery .load() - Hilfe	falby02	JavaScript, Ajax und mehr	2	11.11.2010 20:16
Netz von Objekten mit Abhängigkeiten darstellen/zeichnen	serPHPico	PHP-Fortgeschrittene	12	25.08.2010 18:52
[Erledigt] Statistik mit jQuery	DJ_RhoxxZ	JavaScript, Ajax und mehr	6	25.07.2010 17:47
jQuery Plug scroll to - wie einbetten?	mxxxx	JavaScript, Ajax und mehr	5	24.04.2010 18:12
kürzeren div container authoatisch der höhe des contends anpassen	litterauspirna	HTML, Usability und Barrierefreiheit	15	29.07.2009 00:57
2 div Container immer gleich lang	Kein Genie	HTML, Usability und Barrierefreiheit	4	27.07.2009 13:38
jQuery Plugin - so richtig?	stayInside	JavaScript, Ajax und mehr	5	23.02.2009 12:34
Links vom Untermenü in Container öffnen	Surfer	PHP Tipps 2008	0	27.12.2008 19:24
[Erledigt] <div> Container auf Lightbox verlinken	CHRIS	HTML, Usability und Barrierefreiheit	2	12.08.2008 14:11
<div> Container über <select> Boxen legen	Zergling-new	HTML, Usability und Barrierefreiheit	14	19.01.2008 01:12
[CSS] Container in Container	Igäl	HTML, Usability und Barrierefreiheit	5	04.09.2007 11:29
IE6: Container mit Float dabei wird margin doppelt gewertet	DonTermi	HTML, Usability und Barrierefreiheit	1	11.01.2007 09:02
[Erledigt] Container im Firefox falsch dargestellt		HTML, Usability und Barrierefreiheit	27	15.08.2005 23:18

18.02.2011, 12:34
dreamcatcher Erfahrener Benutzer Registriert seit: 28.12.2010 Beiträge: 599 PHP-Kenntnisse: Anfänger	jQuery <div> Container generieren lassen ? Hallo, ich suche fast verzweifelt nach einer Methode um mir <div> Container generieren zu lassen. Nehmen wir als Beispiel, dass man eine Mitgliedsseite hat mit einem Button um neue Mitarbeiter hinzuzufügen. Bei einem klick auf "add" soll dann automatisch ein entsprechender Container mit einer dynamischen ID und Class generiert werden. Nun, per jQuery dachte ich kann ich es durch hide() und Show() löshen, geht aber nicht da ich nur auf ein bereits existierendes Element verweisen kann und kein "dynamisches", im Sinne von sich immer änderndes (von der ID her) erstellen kann. ______________ Also das Problem kurz zusammengefasst: Ich klick auf "add" und ein dynamische Container wird erstellt, auf der Grundlage eines Editfelds. Im Editfeld steht z.B. 123, dann soll der Container ebenfalls als ID 123 besitzen. Es ist leicht an die ID zu kommen durch editfeldid.value, allerdings wie kann ich den vordefinierten div Container erstellen ? Vielen Dank und liebe Grüße P.S.: Stichwörter sind natürlich auch erwünscht, Hauptsache weitere Anhalspunkte


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

18.02.2011, 12:40
Young Jedi Erfahrener Benutzer Registriert seit: 19.05.2008 Beiträge: 612 PHP-Kenntnisse: Fortgeschritten	Guck doch einfach mal in die jQuery Documentation. Es gibt Sachen wie append, prepend, after, before (oder so in der Art... genau hab ich es auch nicht im Kopf) __________________ http://tippsgegenlangeweile.de

18.02.2011, 12:46
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	PHP-Code: `$('button#add').click(function(){ var html = '<div id="'+$('input#eingabe').val()+'">Bla bla<div class="delete"></div></div>'; $('div#content').append(html); }); $('.delete').click(function(){ $(this).parent().remove(); });` so in etwa __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen

23.02.2011, 13:20
dreamcatcher Erfahrener Benutzer Registriert seit: 28.12.2010 Beiträge: 599 PHP-Kenntnisse: Anfänger	Es funktioniert soweit, allerdings kann ich es nicht in eine .js Datei auslagern, soll das so sein ? PHP-Code: `$("#append").click(function () { $('.box').append("<div class='newbox'>I'm new box by append</div>"); });` sobald ich das unter den button stecke in <script> gepackt funktioniert es. Wenn ich im Head Bereich allerdings eine main.js einbinde und in die main.js das oben geschriebene schreibe, passiert überhaupt nichts Beispieldateien für das inkludieren: index.html PHP-Code: `<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="main.js"></script> </head> <body> <div class="box">I'm a big box</div> <p> <button id="append">append()</button> </p> </body> </html>` main.js PHP-Code: `$("#append").click(function () { $('.box').append("<div class='newbox'>I'm new box by append</div>"); });` EDIT:// Wenn ich <script type="text/javascript" src="main.js"></script> unter den Button schreibe, dann funktioniert es ebenfalls. Es kann doch aber nicht sein dass ich meine .js Dateien am Ende der HTML Datei inkludieren muss, damit es funktioniert !? Geändert von dreamcatcher (23.02.2011 um 13:25 Uhr).

23.02.2011, 13:38
ChrisB Moderator¹ Registriert seit: 28.03.2010 Beiträge: 7.470 PHP-Kenntnisse: Fortgeschritten	Du kannst nicht auf HTML-Elemente zugreifen, bevor sie im DOM existieren. Stichwort: onload, bzw. in jQuery ready. Das sind übrigens absolute Basics. __________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

23.02.2011, 14:01
dreamcatcher Erfahrener Benutzer Registriert seit: 28.12.2010 Beiträge: 599 PHP-Kenntnisse: Anfänger	Da hatte ich nicht dranne gedacht, na klar... Dementsprechend dann die Lösung mit document.ready davor... Dank dir