'insert an image inside Li

i have this html code

<ul id="discussion">
  <li>my name is aymen <img src="img.jpg"</li>
</ul>
<input type="button" id="send" />
<input type="text" id="message"/>

and this one :

<script>

   $('#send').click(function (){
   var mes = $('#message').val().replace('(<3)', '<img src="pics/lol/love.png">');
   $('#discussion').append('<li >' + mes+'</li>');});

</script>

Expactation :

message + the picture

but i found :

message +

 <img src="pics/lol/love.png"/>
javascriptjqueryhtml


Solution 1:[1]

The issue is because you have a syntax error in the append() call. You've closed the string before the > and have missed the ) at the end. Also note that the img element in your HTML is missing the closing />. Try this:

$('#send').click(function() {
  var mes = $('#message').val().replace('(<3)', '<img src="pics/lol/love.png">');
  $('#discussion').append('<li>' + mes + '</li>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="discussion">
  <li>my name is aymen <img src="img.jpg" /></li>
</ul>
<input type="button" id="send" value="Send" />
<input type="text" id="message" value="Foo (<3)" />

Solution 2:[2]

1- The image has not closing tag. Remove the bad formed <li> in your html:

  <li>my name is aymen <img src="img.jpg"</li>

2- Maybe your script block is before the tag, so put your jquery code in a document.ready block:

document.ready(function(){
   $('#send').click(function() {
   var mes = $('#message').val().replace('(<3)', '<img src="pics/lol/love.png">');
   $('#discussion').append('<li>' + mes + '</li>');
   }); 
}

3- Change your input to this:

<input type="text" id="message" value="(<3)" />

4- Check your jquery link.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Rory McCrossan
Solution 2

Related Questions