如何在输入文本后将插入 URL 附加到图像中？答案

【问题标题】：how do I append the inserted URL into image after the inputed text?如何在输入文本后将插入 URL 附加到图像中？
【发布时间】：2016-09-26 20:02:47
【问题描述】：

我已经编写了代码，但是 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()+'">'))
    })
});

我还想使用“input”或“textarea”而不是因为我想用 ng-model(angularjs) 标记该字段。

【问题讨论】：

$("#bod") 选择 div 的 ID。

标签： javascript jquery html css angularjs

【解决方案1】：

我相信这就是你想要完成的：

一方面，您尝试使用不带# 的id 选择器来引用您的元素。

$("bod") 应该是$("#bod") 等。“#”表示一个 ID。

而且你检索输入值的方式也是错误的。

此外，如果您想要一个项目的值，请使用 ID。否则，您将仅使用通用元素选择器获得一个数组。我给了你的输入一个 id，所以你不只是想从 $('input') 中得到一个值

（我在你的值里放了一个占位符图片地址，你可以去掉）

还可以查看 sn-p 全屏。小视图使它看起来像您的文本正在被删除，但事实并非如此。只是当img被追加的时候，所有东西的baseline都低于sn-p查看器中的窗口。

$(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>

【讨论】：

【解决方案2】：

如果我正确理解了您的要求，那么 JQuery 代码应该是这样的：

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

【讨论】：