[FIXED] How to insert a HTML tag into the same <div> tag in a single keypress event? (in JQuery or Javascript)

Issue

I want to insert a HTML tag in a keypress event. I am new to jQuery and JavaScript, and I've also searched for this thing, but got no answer for this thing

I know about the append and selectionStart methods but i want to insert at the position of text cursor

For E.g., if i type the letter 'a', it should send <img src='a.png'> to the div, at the cursor position

$("#textcontent").contentEditable = "true";

$(document).ready(function(){
  $("#textcontent").keydown(function(event){ 
    $("#textcontent").append("<img src='" + event.key +".png'>");

But this (JS append code at the top) is not I want, but I want to insert a HTML tag at the current text cursor position

My HTML:

<div class="textcontent" contenteditable="true">
  <img src='h.png'>
  ... // more image tags goes here
</div>

Can anybody pls give some answers for this problem?

Solution

Check this out:

---

$("#textcontent").keydown(function(event) {
  if (event.key === "Backspace") return; // allow backspace to clear image
  if (!/^[a-zA-Z0-9]{1,1}$/.test(event.key)) return false; // just allow a-z and 0-9

  const position = document.getSelection().anchorOffset; // get position
  const newElement = $(`<img alt="${event.key}" src="https://eu.ui-avatars.com/api/?name=${event.key}">`); // create new element
  const element = [...$("#textcontent img")][position]; // get previous element on index "position"
  if (element)
    textcontent.insertBefore(newElement.get(0), element); // prepend element
  else $("#textcontent").append(newElement); // append element
  
  /* OPTIONAL! place caret at the end */
  textcontent.focus();
  const range = document.createRange();
  range.selectNodeContents(textcontent);
  range.collapse(false);
  const selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
  /**/
  
  return false; // cancel event to avoid text inside div
});

#textcontent {
  border: 2px solid gray;
  padding: 10px;
  border-radius: 10px;
}
img {
  margin-left: 7px;
  width: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="textcontent" contenteditable="true"></div>

Answered By - jns

Answer Checked By - Terry (PHPFixing Volunteer)