0

I'm trying to figure out something without results. I have a Simple <img> used as button, and if I click on it, the text from other <h3> elements should change. That part is working, but I'm also trying to include on the new text an image as a Bullet element, but it's not working, it's rendering as text too. Here's my actual 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');
 });

Could you help me to find a solution?

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Eugenio
  • 489
  • 3
  • 17

1 Answers1

3

Use .html() instead of .text() as .text() will only set textContent of the element, it will not insert provided argument as 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>
Rayon
  • 36,219
  • 4
  • 49
  • 76
  • For further reference: see [What is the difference between jQuery: text() and html()?](http://stackoverflow.com/questions/1910794/what-is-the-difference-between-jquery-text-and-html) and [documentation for jQuery's html()](http://api.jquery.com/html/). – showdev Mar 21 '16 at 17:32
  • thanks @RayonDabre it works fine! you're the best, so that's the answer to my problem, use .html instead of .text – Eugenio Mar 21 '16 at 17:34