0

I've got this button in which I'd like to insert an icon with JavaScript:

<button id="chat5" onclick="actualizarIdChat('{{ elemento.pk }}')" class="btn btn-secondary" style="background-color: maroon; border-color: transparent;border-radius: 15px;height: 60px;margin: 10px 0px 10px 0px;width: 90%;" type="button">
    <img class="border rounded-circle" style="width: 50px;height: 50px;border-color: transparent;" src="{{ elemento.producto.info_producto.contenido_multimedia.0.contenido_url }}">
    &nbsp; &nbsp; &nbsp;{{ elemento.producto.info_producto.nombre }}
</button>

This is the code I've defined to make it work, but it does nothing.

var idChat = 'chat5';
var icon = document.createElement("div");
icon.innerHTML = '<i class="fa fa-envelope"></i>';
document.getElementById(idChat).appendChild(icon);

How could I do it?

cildoz
  • 436
  • 3
  • 14
  • Possible duplicate of [HTML / CSS How to add image icon to input type="button"?](https://stackoverflow.com/questions/2920076/html-css-how-to-add-image-icon-to-input-type-button) – Tigger May 12 '19 at 09:26
  • You may want to create the element like you did the div and append it to your div – Jonny May 12 '19 at 09:30

1 Answers1

1

Update javascript part, it looks like:

var buttonElement = document.getElementById("chat5");
buttonElement.innerHTML = buttonElement.innerHTML + '<i class="fa fa-envelope"></i>';

It will work

Muhammad Ovais Hanif
  • 142
  • 1
  • 8