Question

<div contenteditable="true">
    abcde<img src="abc.jp" />fg
</div>

$('div').append('<img src="abc.jpg" />'); //this will append img at end of text

我尝试将图像添加到位置6的div中

是否可以将图像附加到位？

Answer 1

获取div的文本将其拆分到指定位置并将其连接到agian。然后覆盖div的html：

var a = $.trim($('div').text());
var b = '<img src="https://jsfiddle.net/img/logo.png" />';
var position = 5;
var output = a.substr(0, position) + b + a.substr(position);
$('div').html(output);

Example

注释

使用.substr()似乎比.splice

更快

我使用$.trim()来避免因空格或换行符错误的位置数

该排名设为5，因为.substr()开始计算0

Answer 2

在段落标签中包装您的文本，然后您可以在段落后附加img：

<div contenteditable="true">
    <p>abcde</p><span>fg</span>
</div>

$('div p').append('<img src="abc.jpg" />');

jquery append（）在字符串位置

2 个答案: