javascript不在运行时添加类创建的div

Question

我想创建一个面板，它有两个 div 和使用 javascript 的类:

<div class="panel-heading">
  <div class="panel-title">
    <h4>OAS - Marked To Me</h4>
  </div>
</div>

上面的代码构成了一个完美的面板，我使用下面的代码来实现上面的模式:

$("#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>