Ändern Sie den Text mit Funktion und enthalten Bullet-Bilder

Question

Ich versuche, etwas ohne Ergebnisse herauszufinden. Ich habe eine einfache als Schaltfläche verwendet, und wenn ich darauf klicke, sollte der Text von anderen <h3> Elemente ändern. Dieser Teil funktioniert, aber ich versuche auch, ein neues Bild als Bullet-Element in den neuen Text einzufügen, aber es funktioniert nicht, es wird auch als Text gerendert. Hier ist meine eigentliche Code:

HTML:

<img id="button1" src="images/info.png"/> 
<h3 class="text1"> Here's some temporal text </h3> 

javascript:

$("#button1").click(function() { 
$(".text1").text('This will be the new text also including a bullet <img src="images/bullet.png" style="margin-right:10px;"/> And here continues the text, but seems to be that the bullet is not being rendered:(only as text'); 
}); 

Können Sie mir helfen, eine Lösung zu finden?

Answer 1

Verwenden .html() statt .text() als .text() wird nur gesetzt textContent des Elements, wird es nicht Argument als DOM Element

$("#button1").click(function() { 
 
    $(".text1").html('This will be the new text also including a bullet <img src="images/bullet.png" style="margin-right:10px;"/> And here continues the text, but seems to be that the bullet is not being rendered:(only as text'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<img id="button1" src="images/info.png" /> 
 
<h3 class="text1"> Here's some temporal text </h3>