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()+'">'))
    })
});

我也想使用“输入”或“textarea”而不是因为我想用ng-model（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")等。＆＃39;＃＆＃34;表示ID。

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

此外，如果您想要一个项目的值，请使用ID。否则，您只需使用通用元素选择器即可获得数组。我为您的输入提供了一个ID，因此您只是试图从$('input')

中获取价值

（我在您的值中放置了占位符图片地址，您可以将其删除）

同时查看整个代码段。小视图使您的文本看起来像被删除，但事实并非如此。只是当附加img时，所有内容的基线都低于摘录查看器中的窗口。

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: