入力したテキストの後ろに画像に挿入された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

：1の場合

、あなたがしようとしています#のないidセレクタで要素を参照してください。

$("bod")$("#bod")あるべき、などの「＃」は

。IDを示し、また、あなたが入力の値を取得した方法は、すべて間違っていた。また

使用すると、1つの項目の値をしたい場合私はあなたの入力にIDを与えたので、値を取得しようとしていただけではありませんでした。

（私はプレースホルダー画像を入れましたあなたの価値のアドレス、それを取り除くことができます）

スニペットの全画面も表示されます。小さなビューは、テキストが削除されているように見せますが、実際はそうではありません。 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>