javaScriptで2つの要素を含むdivを作成するにはどうすればよいですか？

私はかなりJavaScriptの新版です。私は助けが必要です。 2つの要素からなるdivを作成しようとしていますが、その後に特定のクラスに追加する必要があります。ここで私は今のところ出ているものです：javaScriptで2つの要素を含む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>

上記コードの問題ではなく、私のボタンや入力が含まれている1つだけapended div要素を与える、それは私のボタンといくつかの望ましくない箱や無入力フィールドを与えることです。誰も正しい出力を得る方法を教えてもらえますか？目的の解決策は、javaScriptを使用してmyClassに追加されるボタンと入力フィールドを含むdivを作成することです。ありがとう。あなたは正しい道にいる

出典

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で2つの要素を含むdivを作成するにはどうすればよいですか？

答えて

関連する問題