이것은 h1 노드입니다. 노드를 삽입하고 span 탭을 추가하여 선택한 텍스트의 글꼴 색을 빨간색으로 변경합니다.




$(function(){
	$("#insertNode").click(function(){
		var selObj=window.getSelection();
		var selRange=selObj.getRangeAt(0);
		//var selectedText=selObj.toString();
		var el = document.createElement('span');
		el.className='addColor ';
		el.id="test";
		el.innerHTML="a test";
		selRange.insertNode(el);
	});
		$("#addStyle").click(function(){
		var selObj=window.getSelection();
		var selRange=selObj.getRangeAt(0);
		//var selectedText=selObj.toString();
		var el = document.createElement('span');
		el.className='addColor ';
		el.id="test1";
		selRange.surroundContents(el);
	});
})

참고 자료: getSelection,range 대상 속성, 방법 이해, 설명document.createElement()에 대한 설명, 상세 정보