CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ghayourabbas
ghayourabbas

Reputation: 23

Add text after span text not within the span tag

Check this screenshot:

enter image description here

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.

Upvotes: 0

Views: 1177

Answers (3)

T.J. Crowder
T.J. Crowder

Reputation: 1075785

$('[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>

Upvotes: 3

Developerjas
Developerjas

Reputation: 23

try this

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

Upvotes: 0

Kavindra
Kavindra

Reputation: 1707

Try:

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

Upvotes: -1

Related Questions