JavaScript Range.insertNode() — вставити вузол у діапазон

Метод insertNode() вставляє вузол на початок діапазону.

правити

Загальний опис

Це те, як редактори вставляють щось на місце курсора: курсор — це порожній діапазон, і вставка йде саме туди.

Якщо початок діапазону стоїть посеред текстового вузла, той розріжеться на два, а вузол вставиться між ними. Браузер робить це сам.

правити

Порада

Вставив вузол — постав курсор після нього (setStartAfter), інакше наступне введення піде перед вставленим.

автор: NagarD правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
insertNode	1+	1+	1+	7+	12+	9+

Підтримка: мобільні переглядачі

Переглядач
insertNode	yes	yes	yes	yes

Приклади

+ запропонувати свій приклад у пісочниці

<div id="editor" contenteditable>Текст із курсором</div>

// у демо виділення створюємо самі; вручну виділи текст і спробуй ще раз
const initialRange = document.createRange();
initialRange.selectNodeContents(document.getElementById('editor').firstChild);
window.getSelection().removeAllRanges();
window.getSelection().addRange(initialRange);

function insertAtCursor(text) {
    const selection = window.getSelection();
    const range = selection.getRangeAt(0);

    range.deleteContents(); // якщо щось було виділене

    const node = document.createTextNode(text);
    range.insertNode(node);

    // курсор — ПІСЛЯ вставленого
    range.setStartAfter(node);
    selection.removeAllRanges();
    selection.addRange(range);
}

insertAtCursor('👋');