Combine string and element and insert it in innerHtml

Question

Imagine I have some element

<p>Hello</p>

user click between e and l letter (put caret in this place) , on this click I want insert some element between those letters . It will be

<p>He<b>Here</b>llo</p>

is there any way to make it ?

Code example:

  const selection = document.getSelection();
  const parent = selection.baseNode.parentNode;
  const b = document.createElement('b')
  b.innerHTML = 'Here'

  parent.innerHTML = 'he'+ b + 'llo'

It will not work as you understand , I need solution for this case. Caret position I can determine

selection.focusOffset

and this mean that I have to get selection text , and insert on caret position <b>Here</b> element. I've also tried to find method to convert element to string , but haven't foudn . I mean document.createElement(tagName) make it as string , then I can insert it in text

Yes, but yoi need to post a minimal reproducible example. I don't want to write all of the JavaScript, too much work, so post some broken JS and I'll try to fix it. — zer00ne
– zer00ne, Commented Jan 18, 2022 at 20:31
Determining where to put the caret on clicking inside a text node is not an easy problem to solve -- there is a non-standard method for it but it's not universally available. (The rest of the question is trivial, just insert whatever you want once you've figured out where exactly to insert it.) — Daniel Beck
– Daniel Beck, Commented Jan 18, 2022 at 20:38

FZs · Accepted Answer · 2022-01-21 13:47:00Z

1

You can use the insertNode method of a Range in the Selection to do it.

Here's a basic example:

const p = document.querySelector('p')
p.addEventListener('click', () => {
  const selection = document.getSelection();
  if(!selection.isCollapsed || !selection.containsNode(p, true))
    return
  const b = document.createElement('b')
  b.innerText = 'here'
  const range = selection.getRangeAt(0)
  range.insertNode(b)
  range.collapse() //unselect inserted text
})

<p>Some text</p>

edited Jan 21, 2022 at 13:47

answered Jan 18, 2022 at 21:09

FZs

18.8k13 gold badges47 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andrii Radkevych · Accepted Answer · 2022-01-18 20:59:27Z

0

      const selection = document.getSelection();
      const text = selection.anchorNode.data;
      const parent = selection.baseNode.parentNode;
      const position = selection.focusOffset;

          const html = [
            text.slice(0, position),
            createdElementSpan.outerHTML,
            text.slice(position),
          ].join('');

          parent.innerHTML = html;

Seems like it works, outerHTML property return string . But also have to find out how to put cursor in correct position

answered Jan 18, 2022 at 20:59

Andrii Radkevych

3,5027 gold badges36 silver badges68 bronze badges

Comments

resti · Accepted Answer · 2023-10-26 16:21:33Z

0

Here is my simple solution using DOMParser

 let parser = new DOMParser();
 let doc = parser.parseFromString(yourTextHtmlString, 'text/html');
 element.append(doc.body)

answered Oct 26, 2023 at 16:21

resti

12 silver badges10 bronze badges

Collectives™ on Stack Overflow

Combine string and element and insert it in innerHtml

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related