JQuery: Wie kann ich eine div mit class nach Klick auf einen Button einfügen?

Moin,

vielleicht finde ich hier eine Hilfe. Vielen Dank im Voraus für jede Hilfe.

Ich sitze gerade an einem Projekt und wurde mit dem Frontend beauftragt. Ich besitze leider zwar keinerlei Programmierkenntnisse, bin aber gewillt, mich entsprechend daran zu setzen und mir die Grundlagen beizubringen.

Nun möchte ich einen Button generieren, der mir nach einem Klick ein neues <div>-Element in meinem DOM erzeugt und dabei auch eine bestimmte Klasse zugewiesen bekommt.

Probiert habe ich das Ganze wie folgt:

$("#btn1").click(function(){
  $("p").append("<div> Test </div>");
  div.addClass("operator")
});

So hat das aber leider nicht geklappt. Das Ganze lässt sich hier besser visualisieren und testen: https://www.w3schools.com/code/tryit.asp?filename=GBQJV6O2UFXH

Ein der class entsprechendes Design mit den Attributen habe ich per CSS bereits geschrieben. Da allerdings in der reinen HTML der <div>-Tag nicht vorliegt, wird mir das erst natürlich nicht angezeigt. Logisch. Erst nach dem Klick auf den Button soll der

<div class="operator">

Einzug in das DOM finden.

Wie kriege ich das hin?

Danke.

Answer 1

[regex9]

Beispiel:

HTML:

<p></p>
<button id="btn1">Click me</button>

JavaScript:

$("#btn1").click(function() {
  $("p").append("<div class=\"operator\">Test</div>");
});

Demo

Comments

[GangstacuX]

Hallo, ich habe dein Beispiel eingebaut, und es funktioniert alles. Genau so wie auch die anderen Antworten funktionieren. Danke also auch den anderen. An einer Stelle komme ich hier aber nicht weiter. Die ganze "append" Geschichte ist in einer for-schleife, und an sich funktioniert auch das. Ich kriege genau die Anzahl an div's generiert, die ich haben möchte. Nur mit dem "Test" dadrin habe ich ein Problem.

______________________________________________________________________________

for ( x = 1; x <= 10; x++ ) {

      $("#operatornumberbox").append("<div class=\"oneoperator_left\"> x </div>");

_______________________________________________________________________________

In jedem Schleifendurchgang soll außerdem als innerHTML der aktuelle Durchlauf angezeigt werden. Also der aktuelle Wert von x mit rein kommen. Dummerweise wird mir x als String rausgegeben. Also immer x, statt der aktuelle Zahlenwert.
Was ist der Clue? Danke!

[regex9]

@GangstacuX

Das x ist Bestandteil des Strings und wird folglich auch mit als konstanter Wert behandelt. Du musst aber den Wert von x aus der Variable holen und mit dem String verbinden.

Das lässt sich mit dem Konkatenationsoperator (+) lösen:

for (let x = 1; x <= 10; x++) { 
  $("#operatornumberbox")
     .append("<div class=\"oneoperator_left\">"
     + x
     + "</div>");
}

Answer 2

[Dory1]

Du kannst den Klassennamen direkt im HTML mitgeben:

$("#btn1").click(function() {
  $("p").append('<div class="operator"> Test </div>');
});

Alternativ:

$("#btn1").click(function() {
  var $div = $('<div> Test </div>');
  $div.addClass("operator");
  $("p").append($div);
});

Comments

[GangstacuX]

Perfekt, danke.

Answer 3

[RakonDark]

 $("#btn1").click(function(){
  $("p").append( $("<div> Test </div>").addClass("operator"));
});