如何創建一個在javaScript中包含兩個元素的div？

我對javaScript相當陌生，我需要幫助。我想創建一個由兩個元素組成的div，然後我想將它附加到特定的類上。以下是我想出迄今：如何創建一個在javaScript中包含兩個元素的div？

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

爲了簡單起見，我只包括我相信這些顯著代碼。

<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>

與上面的代碼的問題是不是給我只是一個單一的apended DIV包含按鈕和輸入，它給了我一個按鈕和一些不想要的盒子，沒有輸入字段。任何人都可以幫助我如何獲得正確的輸出。所需的解決方案是創建一個div，其中包含使用javaScript附加到myClass的按鈕和輸入字段。謝謝。

來源

2017-03-06 Dave

你在正確的道路，你必須記引用到的jQuery因此$(".myClass").append(div1);不工作。這可以通過使用來實現。

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>

如果您正在使用jQuery。

您的解決方案的

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>

來源

2017-03-06 09:37:19 Satpal

兩者可以完美運行。謝謝。 – 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>

來源

2017-03-06 09:36:09

如何創建一個在javaScript中包含兩個元素的div？

回答

相關問題