javascript - 在 JavaScript/jQuery 中使用按钮单击动态添加 div

Question

如何在 JavaScript/jQuery 中单击按钮时动态添加 div？ 我想要所有具有类“listing listing_ad job”的 div 格式。

这是我使用 jQuery 试用的代码。

$('#btnAddtoList').click(function(){
	var newDiv = $('<div class="listing listing_ad job"><h4><a>Some text</a></h4> </div>');
  //newDiv.style.background = "#000";
  document.body.appendChild(newDiv);
});

.listing {
  border-bottom: 1px solid #ddd;
  float: left;
  padding: 0 0 5px;
  position: relative;
  width: 559px;
}

.listing:hover {
  background: #f5f5f5 none repeat scroll 0 0;
  border-bottom: 1px solid #ddd;
  cursor: wait;
}

a:hover {
  color: #ff5050;
}

.subtitle {
  width: 430px;
  font-weight: normal;
  font-size: 12px;
  font-family: Arial;
  color: #7f7f7f;
}

.info {
  float: left;
  margin: 10px 15px 5px;
  min-width: 500px;
  
  clear: both;
  color: #7f7f7f;
  margin: 15px 44px 15px 0;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnAddtoList">
Add to list
</button>

<div class="listing listing_ad job">
  <h4>
   <a>
  Excellent Opportunity For Internship at Diamond
  </a>
  </h4>
  <div class="subtitle">
  Lahore, Punjab
  </div>
  <div class="info">
  This is Info / Description.
  </div>
</div>
<!-- ************************ -->

<div class="listing listing_ad job">
  <h4>
  <!-- Src: http://jobs.mitula.pk/internship-program-lahore-jobs -->
  <a>
  Excellent Opportunity For Internship at Diamond
  </a>
  </h4>
  <div class="subtitle">
  Lahore, Punjab
  </div>
  <div class="info">
  This is Info / Description.
  </div>
</div>

Jsfiddle:http://jsfiddle.net/mr4rngbL/3/

Answer 1

是的，您可以 - 通过将 jQuery 添加到文档的脚本中，并将代码写入 document.ready

$(function() {
    $('#btnAddtoList').click(function(){
        var newDiv = $('<div class="listing listing_ad job"><h4><a>Some text</a></h4> </div>');
      //newDiv.style.background = "#000";
       $('body').append(newDiv);
    });
});

示例 http://jsfiddle.net/mr4rngbL/5/

您在评论中提出的问题示例:http://jsfiddle.net/mr4rngbL/6/

LAST 示例基于您在评论中的请求:http://jsfiddle.net/mr4rngbL/7/