Javascript 현재 커서의 위치에 특정 태그(text or Dom)를 집어넣기

커서 위치에 특정 텍스트 or DOM를 넣는 코드입니다.

 

const selection = window.getSelection();//커서의 현재 위치
const newRange = selection.getRangeAt(0);// 커서의 Range값 

let tmpNode= document.createElement("span"); 
tmpNode.innerHTML = "<b>cursor location1</b>"; 
newRange.deleteContents();
newRange.insertNode(tmpNode); //span태그 추가

 

특정 부분을 피드백해주는 기능 사용하려고 테스트중인데요,

구글에서는 보안에 걸려 createElement가 먹히진 않지만 네이버에서 잘 작동했습니다.

 

 

네이버에서 테스트한 결과 입니다.