Question

我有这个HTML代码

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

和这一个：

<script>

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

</script>

Expactation：

消息+图片

但我发现：

消息+

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

Answer 1

问题是因为append()调用中存在语法错误。您已在>之前关闭了字符串，并且最后错过了)。另请注意，HTML中的img元素缺少结束/>。试试这个：

$('#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)" />

Answer 2

由于我们没有上述答案是正确的，也许你有一些小错误。

1-删除html中错误形成的<li>：

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

它的图像没有关闭标记。

2-也许你的脚本块位置不好，所以把你的jquery代码放在 document.ready 块中：

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

3-将您的输入更改为：

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

4-检查你的jquery链接。

在Li里面插入一个图像

2 个答案: