jquery append() 在字符串位置

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

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

有什么方法可以将图像附加到位置吗？

Answer 1

获取div 的文本在指定位置拆分并再次连接。然后覆盖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" />');