Hinzufügen von div dynamisch mit der Schaltfläche klicken Sie in JavaScript/jQuery

Question

Wie kann ich div auf Knopfdruck in JavaScript/jQuery dynamisch hinzufügen? Ich möchte alle Formatierung von div mit der Klasse "Listing listing_ad job".

Dies ist mein Code, den ich ausprobiert habe, mit 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

Ja, Sie können - von jQuery, um das Skript des Dokuments, und wrpping den Code in 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); 
    }); 
}); 

Beispiel hinzugefügt http://jsfiddle.net/mr4rngbL/5/

Beispiel für das, was Sie in den Kommentar gefragt haben: http://jsfiddle.net/mr4rngbL/6/

Und LESEN Beispiel auf der Grundlage Ihrer Anfrage im Kommentar: http://jsfiddle.net/mr4rngbL/7/

Answer 2

Ja, Sie können ganz einfach ein div auf die Schaltfläche klicken in jQuery hinzuzufügen. Erstens, um den Klick-Listener einrichten:

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

Dann die Funktion erstellen Sie die div hinzufügen (hier wird die div mit der Klasse der Behälter zu dem Elemente hinzugefügt werden):

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

I hoffe das ist hilfreich.

Answer 3

Hier reine JavaScript-Lösung

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>