jQuery - 用img标签填充输入然后追加它

Question

输入没有正确显示输入标签，我尝试了很多变种来逃避引号，但我得到了相同的结果！新前置输入中的img标记在引用处被截断。这就是我所拥有的：

<div id="student-info">
  <img src="students/24535.jpg" />
</div>

var imgSrc = $('#student-info').find('img').attr('src'); 
var imgCode = '<img src="'+imgSrc+'" />';
$('#student-info').prepend('<span class="img-code"><input type="text" value="'+imgCode+'"></span>');

输出在输入标记中显示<img src=，然后在输入标记后显示">。如何让最终输出看起来像这样（所以我可以从输入中复制它）：

<span class="img-code"><input type="text" value="<img src="students/24535.jpg" />"></span>

这是fiddle

Answer 1

您可以采取略微不同的方法：

var imgSrc = $('#student-info').find('img').attr('src'); 
var imgCode = '<img src="'+imgSrc+'" />';

$('#student-info').prepend('<span class="img-code"><input type="text"></span>');
$('input').val(imgCode);

Answer 2

替换这个：

value="'+imgCode+'"

对此：

value=\''+imgCode+'\'

这是jsFiddle。