Steps to add an element following the caret's current position in the document

Question

Steps to add an element following the caret's current position in the document

Initially, I assumed this task would be straightforward using Javascript. However, I quickly realized my mistake: Within the TinyMCE iframe body, I have the following HTML code:

   <ul>
      <li><a href="#">First</a></li>
      <li><a href="#">Second</a></li>
      <li><a href="#">Third</a></li>
   </ul>

My goal is to place the cursor after the word "Second" and upon clicking a button, trigger an onclick-function that inserts a new "LI" element AFTER the "Second" list item, resulting in the following updated structure:

   <ul>
      <li><a href="#">First</a></li>
      <li><a href="#">Second</a></li>
      <li><a href="#">New inserted list item</a></li>
      <li><a href="#">Third</a></li>
   </ul>

It's worth noting that the LI-tags do not have any ID or class assigned to them, ruling out the use of getElementById. This limitation is where I encounter difficulties. (Furthermore, this functionality takes place within a TinyMCE editor textarea, though this detail shouldn't impact the overall approach.)

javascript tinymce-4

Answer 1

Answer №1

Check out the live demo by clicking here.

var links = document.querySelectorAll('ul li a');
console.log(links);

for (var j=0; j<links.length; ++j) {
  links[j].addEventListener('click', createList);
}

function createList(event) {
  var listItem = document.createElement('li');
  var newLink = document.createElement('a');
  newLink.href = '#';
  newLink.textContent = 'Click me!';
  newLink.addEventListener('click', createList);
  listItem.appendChild(newLink);
  event.target.parentNode.insertBefore(listItem, event.target.nextSibling);
}

Answer 2

Check out the live demo by clicking here.

var links = document.querySelectorAll('ul li a');
console.log(links);

for (var j=0; j<links.length; ++j) {
  links[j].addEventListener('click', createList);
}

function createList(event) {
  var listItem = document.createElement('li');
  var newLink = document.createElement('a');
  newLink.href = '#';
  newLink.textContent = 'Click me!';
  newLink.addEventListener('click', createList);
  listItem.appendChild(newLink);
  event.target.parentNode.insertBefore(listItem, event.target.nextSibling);
}

Steps to add an element following the caret's current position in the document

Answer №1

Similar questions

Update the object with fresh data once the XML data is transformed into JSON format

What could be causing the failure of loading CSS images or JS in my Laravel project?

Can you show me how to recreate a 502 gateway timeout error?

Modify the layout of the date selector to display weekdays instead - material ui

Mastering data extraction from JSON using React JS (with Axios)

Effortlessly uploading large files using axios

The dynamic countdown timer is malfunctioning as the clock is inaccurately displaying the current time

What is the best way to transfer data from a fully filled out JSON form to a PHP database

Is there a way to execute a function only once when the submit button is clicked in a jQuery AJAX form?

What could be causing the player to take damage when either the bullet disappears or when they are hit?

Accessing JSON data from a URL for use within a specific context

Unable to obtain a response even after providing the correct API key in a Node.js POST request

I'm wondering why this isn't working properly and not displaying the closing form tag

Retrieving the text of a button using Protractor

Unpacking the mystery of the cdvfile:// protocol

Exploring AngularJS: Custom directive for accessing the min attribute value of an input[date] element

Steps to disable fancybox for a specific selector

Ajax request triggers a page refresh

Enhancing MongoDB query efficiency using Promise technology

Implementing Google Ads Code in NextJS for Automated Units