如何在输入文字后将插入的URL追加到图像中？

Question

我写了代码，但jQuery代码没有得到执行。

Enter URL :<input type="text"> 
<button id="btn"> continue 
</button> 
<div contenteditable="true" 
id="bod"> 
Click on this text to start writting</div> 

$(document).ready(function(){ 
$("btn").click(function(){ 
    $("bod").append($('input').html('<img alt="" src="'+$(this).val()+'">')) 
    }) 
}); 

此外，我想用“输入”或“文本区域”，而不是因为我想标签与NG-模型（angularjs）字段。

Answer 1

如果我理解正确你的需求，然后jQuery代码应该是这样的：

$(document).ready(function(){ 
    $("#btn").click(function(){ 
     var bodElem = $("#bod"); 
     var url = $("input").val(); 
     $('<img alt="" src="'+ url +'">').insertAfter(bodElem); 
    }); 
}); 

Answer 2

我相信这是你要完成的：

首先，您要使用不带#的ID选择器引用您的元素。

$("bod")应$("#bod")等“＃”指示标识。

，你也被检索输入值的方式是完全错误的。

此外，如果你想要一个项目的价值，使用一个ID，否则你会得到一个数组只是使用一个通用的元素选择器。我给你的输入一个ID，所以你不只是试图得到一个值关闭$('input')

（我把一个占位符图像地址在你的价值，你可以删除）

同时查看片段全屏。小视图看起来像你的文字被删除，但它不是真的。只是在添加img时，所有内容的基线都低于代码片段查看器中的窗口。

$(document).ready(function(){ 
 
    $("#btn").click(function(){ 
 
     $("#bod").append('<img alt="" src="'+$('#inp').val()+'">'); 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Enter URL :<input id="inp" type="text" value="http://placehold.it/300"> 
 
<button id="btn">continue</button> 
 
<div contenteditable="true" id="bod">Click on this text to start writting</div>