javascript - 在不在 span 标记内的 span 文本后添加文本

Question

查看此屏幕截图:

我正在使用此代码在 DIV 中添加表情符号范围。

$('body').on('click', '.selectable-icons', function(e) {
    if (e.target.tagName.toLowerCase() === 'span') {
        document.querySelector('[contenteditable]').appendChild(e.target.cloneNode(true));
        $('[contenteditable]').append(" ");
        var current_text = $('[contenteditable]').html();
        alert(current_text);
        $('.publisher_div').html(current_text);
    }

但是 span 标签后没有追加空格，所以我可以在 span 标签后写下一段文字。

Answer 1

$('[contenteditable]').append(""); 将向具有 contenteditable 属性的元素附加一个空格(span，在你的情况下)。如果要在 之后添加空格，请使用 http://api.jquery.com/after/ :

$('[contenteditable]').after(" ");

实例:

var container = $("#container");
console.log("Before:");
container.contents().each(function(index) {
    console.log(index, this.nodeType, this.nodeType === 3 ? '"' + this.nodeValue + '"' : this.tagName);
});
$('[contenteditable]').after(" ");
console.log("After:");
container.contents().each(function(index) {
    console.log(index, this.nodeType, this.nodeType === 3 ? '"' + this.nodeValue + '"' : this.tagName);
});

<div id="container"><span contenteditable>This is the span</span></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>