I have an input (content editable), so i want to write in it and wrap the new word (after that write space) as a span like this:
old content <span class='el'>newWord</span> //old content
also the older content could be content with <span> or not but should not be modified
only should be wrap the new word, the old content should stay as before without changes
var something = document.getElementById('something');
something.addEventListener('keydown', (event) => {
const text = something.innerHTML
if (event.keyCode == 32) {
var split_text = text.split(' ');
console.log(split_text)
var _out = [];
let count = split_text.length;
for (var i = 0; i < count; i++) {
_out[i] = `<span class=el>${split_text[i]}</span>`
}
something.innerHTML = _out.join(' ')
}
}).el {
background-color: red
}<div id="something" contenteditable>
here
</div>