Wie erstellt man ein div, das zwei Elemente in javaScript enthält?

Ich bin ziemlich neu in Java Script und ich brauche Hilfe. Ich versuche, ein Div zu erstellen, das aus zwei Elementen besteht, und danach möchte ich es an eine bestimmte Klasse anhängen. Hier ist, was ich bisher kommen:Wie erstellt man ein div, das zwei Elemente in javaScript enthält?

<body> <div class="myClass"></div> </body>

Der Einfachheit halber habe ich nur die Codes enthalten, die ich glaube, von Bedeutung sind.

<script> 
    var div1 = document.createElement("div"); 
    div1.className = "note"; 
    var btn1= document.createElement("button"); 
    btn1.className = "btn"; 
    var impt1= document.createElement("input"); 
    impt1.className = "impt"; 
    div1.append(impt1); 
    $("#myClass").append(div1); 
    </script>

Das Problem mit dem obigen Code ist, dass anstelle von mir nur eine einzige apended div geben, die Taste und Eingabe enthält, gibt es mir einen Knopf und einig unerwünschtes Feld und kein Eingabefeld. Kann mir jemand helfen, die richtige Ausgabe zu bekommen? Die gewünschte Lösung besteht darin, ein div zu erstellen, das eine Schaltfläche und ein Eingabefeld enthält, das mit javaScript an myClass angehängt wird. Vielen Dank.

Quelle

2017-03-06 Dave

Sie in richtigen Weg sind, Sie haben zur Kenntnis zu jQuery Referenzierung daher $(".myClass").append(div1); nicht funktioniert. Dies kann erreicht werden mit.

document.querySelector('.myClass').append(div1);

var div1 = document.createElement("div"); 
 
div1.className = "note"; 
 

 
var btn1 = document.createElement("button"); 
 
btn1.className = "btn"; 
 
btn1.textContent = "btn"; 
 

 
var impt1 = document.createElement("input"); 
 
impt1.className = "impt"; 
 

 
div1.append(btn1); 
 
div1.append(impt1); 
 

 
document.querySelector('.myClass').append(div1);

<div class="myClass"></div>

Wenn Sie jQuery verwenden.

var div1 = $("<div>", { 
 
    "class": "note" 
 
}); 
 
var btn1 = $("<button>", { 
 
    "class": "btn", 
 
    "text": "btn" 
 
}); 
 

 
var impt1 = $("<input>", { 
 
    "class": "impt" 
 
}); 
 

 
div1.append(btn1); 
 
div1.append(impt1); 
 

 
$('.myClass').append(div1);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="myClass"></div>

Quelle

2017-03-06 09:37:19 Satpal

Ihre beiden Lösungen funktioniert perfekt. Vielen Dank. – Dave

var div1 = document.createElement("div"); 
 
    div1.className = "note"; 
 
    var btn1= document.createElement("button"); 
 
    btn1.className = "btn"; 
 
    btn1.innerHTML = "btn"; 
 
    var impt1= document.createElement("input"); 
 
    impt1.className = "impt"; 
 
    div1.append(btn1); 
 
    div1.append(impt1); 
 
    $(".myClass").append(div1);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
<div class="myClass"></div> 
 
</body>

Quelle

2017-03-06 09:36:09

Wie erstellt man ein div, das zwei Elemente in javaScript enthält?

Antwort

Verwandte Themen