Add text after span text not within the span tag

Question

Check this screenshot:

I am using this code to add span of emoji in 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);
    }

But space is not appending after span tag, so that I can write next text after span tag.

Answer 1

$('[contenteditable]').append(" "); will append a space to the elements with a contenteditable attribute (the span , in your case). If you want to add the space after , use http://api.jquery.com/after/ :

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

Live Example:

 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> 

Answer 2

尝试这个

  $('.publisher_div').append("hi");

Answer 3

尝试：

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