Javascriptを私はこのようなJavaScriptを使用してクラスを持つ2つのdiv要素を持つパネルを作成する作成したdivタグ

Question

、実行時にクラスを追加していません上記のパターンを達成するには：

$("#btnClick").click(function() { 
    var Maindiv = document.createElement("div"); 
    Maindiv.className = "panel-heading"; 
    Maindiv.id = "mainDiv"; 
    document.getElementById("main").appendChild(Maindiv); 

    var subDiv = document.createElement("div"); 
    subDiv.className = "panel-title"; 
    Maindiv.appendChild(subDiv); 
}); 

しかし、このコードでは、上記のように必要なdivを生成していません。

Answer 1

あなたが投稿したJavascriptは、最初の例で配置したDOM構造の出力には近くません。クラス名は類似していません。あなたは一般的なアイデアを持っているようです。言われていること

$("#btnClick").click(function() { 
 
    var outerDiv = document.createElement("div"); 
 
    outerDiv.classList.add("panel-heading"); 
 
    document.getElementById("main").appendChild(outerDiv); 
 
    
 
    var innerDiv = document.createElement('div'); 
 
    innerDiv.classList.add('panel-title'); 
 
    outerDiv.appendChild(innerDiv); 
 

 
    var h4 = document.createElement('h4') 
 
    h4.innerText = 'OAS - Marked To Me'; 
 
    innerDiv.appendChild(h4); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="btnClick" type="button">Click me</button> 
 

 
<div id="main"></div>

、すでにjQueryのを使用しているとして、あなたは新しい要素を作成するためにappend()を使用することによって、問題を単純化することができます

$("#btnClick").click(function() { 
 
    $('#main').append('<div class="panel-heading"><div class="panel-title"><h4>OAS - Marked To Me</h4></div></div>'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="btnClick" type="button">Click me</button> 
 

 
<div id="main"></div>

を