在JavaScript/jQuery中使用按鈕點擊動態添加div

Question

如何在JavaScript/jQuery中按鈕點擊動態添加div？ 我想要div的所有格式都有「listing listing_ad job」類。

這是我試過的代碼，使用jQuery。

$('#btnAddtoList').click(function(){ 
 
\t 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); 
    }); 
}); 

wrpping代碼例http://jsfiddle.net/mr4rngbL/5/

爲你問在評論什麼例子：http://jsfiddle.net/mr4rngbL/6/

而且LAST例如基於在評論你的要求：http://jsfiddle.net/mr4rngbL/7/

Answer 2

是的，你可以很容易地在jQuery的點擊按鈕添加一個div。首先，設置了點擊監聽器：

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

然後，創建添加DIV功能（在這裏，在div被添加到元素與類容器）：

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

我希望這是有幫助的。

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>