js往元素中添加一段html,javascript – 在contentEditable元素中插入HTML元素

这是一个kickstart

// get the selection range (or cursor position)

var range = window.getSelection().getRangeAt(0);

// create a span

var newElement = document.createElement('span');

newElement.id = 'myId';

newElement.innerHTML = 'Hello World!';

// if the range is in #myDiv ;)

if(range.startContainer.parentNode.id==='myDiv') {

// delete whatever is on the range

range.deleteContents();

// place your span

range.insertNode(newElement);

}

我没有IE但在firefox,chrome和safari上工作正常.也许你想玩range.startContainer只有在contentEditable div上进行选择才能继续.

编辑：根据quirksmode range intro你必须改变window.getSelection()部分是IE兼容.

var userSelection;

if (window.getSelection) {

userSelection = window.getSelection();

}

else if (document.selection) { // should come last; Opera!

userSelection = document.selection.createRange();

}