如何在輸入文字後將插入的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>