2017-05-01 1 views
0

ich eine solche Konstruktion mit jQuery bauen wollen:innen Tag unterschiedliche Inhalte Kombinieren

<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>

Mein jQuery-Code, der für diese Linie verantwortlich ist, wie das aussieht:

var a2 = $('<a>').attr("href", "add_to_cart:" + item['id']).text('Add to cart'); 
a2.addClass("btn btn-default add-to-cart"); 
var i1 = $('<i></i>'); 
i1.addClass("fa fa-shopping-cart"); 
a2.append(i1); 

Das Ergebnis enthält jedoch kein <i> Element.

Ich habe versucht, <i> mit .html Funktion anhängen, aber in diesem Fall verschwindet Text. Wie zu machen <a> Element enthalten sowohl Tag und Text danach?

Vielen Dank für Ihre Antworten

+0

Wenn y ou want '' war vor dem Text sollten Sie 'prepend' -' a2.prepend (i1); ' – rie

+0

Vielen Dank, das hat funktioniert, dachte ich, dass diese Funktion unterschiedliche Wirkung hat –

Antwort

0

hahaha vergessen hat, die letzten ...

$(".test").html(a2); 

und die übergeordneten Inhalt

<div class="test"></div> 

$(document).ready(function() { 
 
\t var a2 = $('<a>').attr("href", "add_to_cart:").text('Add to cart'); 
 
\t a2.addClass("btn btn-default add-to-cart"); 
 
\t var i1 = $('<i>iiiiiiiiiiii</i>'); 
 
\t i1.addClass("fa fa-shopping-cart"); 
 
\t a2.prepend(i1); 
 

 
\t $(".test").html(a2); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="test"></div>

Verwandte Themen