使用 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 中單擊按鈕時添加 div。 首先，設置點擊監聽器：

$('button').on('click', addDiv);

然后，創建添加 div 的函數（這里，div 被添加到具有容器類的元素）：

function addDiv() {
    $('.container').append('<div>').addClass('listing listing_ad job');
}

我希望這是有幫助的。

Answer 2

是的，您可以 - 通過將 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/

以及基於您在評論中的請求的最后一個示例： http : //jsfiddle.net/mr4rngbL/7/

Answer 3

這里純 JavaScript 解決方案

 function addDiv(parent_div, content, attrs) { var div = document.createElement('div'); var parent = document.getElementById(parent_div); for (var key in attrs) { if (attrs.hasOwnProperty(key)) { div.setAttribute(key, attrs[key]); } } div.innerHTML = content; if (parent) { parent.appendChild(div); } } var button = document.getElementsByTagName('button')[0]; if (button) { button.addEventListener('click', function() { // change dynamically your new div addDiv('parent', 'hi', { 'class': 'someclass someclass', 'data-attr': 'attr' }); }); }

 <button>Add Div</button> <div id="parent"> </div>