Question

我想在选择范围的末尾插入一个节点，但是根据此处的API文档https://developer.mozilla.org/en-US/docs/Web/API/Range，Range.insertNode（）在该范围的开始处插入该节点，没有其他方法可以在末尾插入，是否有办法在范围对象的末尾添加节点？

Answer 1

只需保存范围的当前位置，将起始位置设置为当前范围的结尾，插入节点，然后再将范围设置回即可。

// assuming..
const myRange = document.createRange();
const startNode = document.getElementById('startNode');
const endNode = document.getElementById('endNode');
const nodeToInsert = document.getElementById('insertNode');

myRange.setStart(startNode, 0);
myRange.setEnd(endNode, 0);

// then..
const insertAtEnd = (myRange, nodeToInsert) => {

    const oldStart = myRange.startContainer;

    const oldEnd = myRange.endContainer;

    myRange.setStartAfter(oldStart);

    myRange.insertNode(nodeToInsert);

    myRange.setStart(oldStart, 0);
    myRange.setEnd(oldEnd, 0); 


};

insertAtEnd(myRange, nodeToInsert);

Answer 2

我看不到GiorgiosJames的答案，因为它将节点放置在起始容器的末尾而不是所选范围的末尾。

我如何使用以下内容：

const insertAtEnd = (myRange, nodeToInsert) => {
   const myRange2=myRange.cloneRange();
   myRange2.collapse(false); // collapse the range to the end of selection
   myRange2.insertNode(nodeToInsert);
};

有关Giorgios和我的答案的有效版本，请参见https://jsfiddle.net/Abeeee/9zjcgbku/。

如何在范围末尾插入节点？

2 个答案: