Include additional content following the text enclosed by the span tag, but do not place it

Question

Include additional content following the text enclosed by the span tag, but do not place it

Take a look at this screenshot:

https://i.sstatic.net/zojKK.jpg

This code snippet allows me to include emoji spans within a 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);
    }

The issue I'm facing is that a space is not being added after the span tag, preventing me from writing text immediately following it.

javascript jquery html css

Answer 1

Answer №1

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

is a function that adds a space to elements containing the attribute contenteditable (such as a span). To place the space after the element, you can utilize http://api.jquery.com/after/:

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

Here is a 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

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

is a function that adds a space to elements containing the attribute contenteditable (such as a span). To place the space after the element, you can utilize http://api.jquery.com/after/:

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

Here is a 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 3

Answer №2

give this a shot

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

Answer 4

give this a shot

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

Answer 5

Answer №3

Give this a shot:

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

Answer 6

Give this a shot:

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

Include additional content following the text enclosed by the span tag, but do not place it

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to make Chrome ask to save a password within an HTML form?

Using AJAX to submit a form to a CodeIgniter 3 controller

Expand a list item to full width based on the number of items present

Is the functionality of the jquery trigger('resize') limited to only one instance?

Opacity of background color only applies to the color

The Html.BeginForm() function is directing to an incorrect action within my controller

what could be causing the token creation issue in node.js when implementing CSRF protection?

Filtering an unsorted list through the URL parameter of #value when the page is first

Creating a table in HTML using the innerHTML property

Utilize Node.js to retrieve the content from a website's body and display it using jQuery

Animating the background position in jQuery is not working

Is there a way to implement tab functionality in jQuery UI through an onclick event?

Skeleton page CSS sub-navigation menu for Internet Explorer 7

Using NextJS: Customizing page names for cleaner URLs

Aligning a large checkbox to the left in Bootstrap 4 styling

How can I locate the source of a slight sideways scrollability issue in HTML and CSS?

Error encountered on page load due to undefined variable thrown by the Express-validator validation process

The designated redirection path, as indicated in the 'next.config.js' file for a particular project, has now been applied to all projects

Tips for expanding the range of values using the pattern attribute

Inserting a new row into a DataTable that has pagination activated, and displaying the recently added row