Range#
Range.insertNode()#
Metoda insertNode() wstawia przekazany węzeł na początek danego zakresu, co wiąże się ze zmianami w drzewie węzłów, na których zakres operuje.
Opis działania#
Samo wywołanie i poszczególne jego części najlepiej objaśnić na zapisie składniowym:
range.insertNode(node);gdzie poszczególne człony oznaczają:
- range - zakres będący obiektem kontekstu.
- node - referencja do wstawianego węzła.
Algorytm wywołania metody insertNode(node) nie jest skomplikowany. Dla lepszego zrozumienia tematu prezentuję go w całości:
- Wstaw node do obiektu kontekstu.
Warto zwrócić uwagę, że jeśli przekazany węzeł wstawiany będzie do węzła tekstowego, to węzeł ten najpierw zostanie podzielony na dwa węzły tekstowe, tak aby w ogóle możliwe było umieszczenie między nimi nowej zawartości. Żeby podział węzła tekstowego na dwa węzły tekstowe był możliwy, to musi on posiadać jakiegoś rodzica.
Po wstawieniu metodą insertNode() nowego węzła do zakresu może nastąpić automatyczne skorygowanie jego końcowego punktu granicznego, tak żeby wszystko pasowało do nowej sytuacji.
Prosty przykład:
<script>
var box = document.createElement("div");
box.innerHTML = "Pierwsza część początkowego węzła tekstowego-Druga część początkowego węzła tekstowego."
document.write(box.textContent); // Pierwsza część początkowego węzła tekstowego-Druga część początkowego węzła tekstowego.
document.write("<br>");
document.write(box.childNodes.length); // 1
document.write("<br><br>");
// Tworzymy nowy zakres
var range = document.createRange();
// Ustawiamy zakres na znak '-' w węźle tekstowym kontenera 'box'
range.setStart(box.firstChild, 44);
range.setEnd(box.firstChild, 45);
document.write(range.startContainer); // [object Text]
document.write("<br>");
document.write(range.startOffset); // 44
document.write("<br>");
document.write(range.endContainer); // [object Text]
document.write("<br>");
document.write(range.endOffset); // 45
document.write("<br>");
document.write(range); // -
document.write("<br><br>");
var newP = document.createElement("p");
newP.innerHTML = "Treść w nowym akapicie.";
// Wstawiamy akapit 'newP' do zakresu
range.insertNode(newP);
document.write(range.startContainer); // [object Text]
document.write("<br>");
document.write(range.startOffset); // 44
document.write("<br>");
document.write(range.endContainer); // [object Text]
document.write("<br>");
document.write(range.endOffset); // 1
document.write("<br>");
document.write(range); // Treść w nowym akapicie.-
document.write("<br><br>");
document.write(box.textContent); // Pierwsza część początkowego węzła tekstowegoTreść w nowym akapicie.-Druga część początkowego węzła tekstowego.
document.write("<br>");
document.write(box.childNodes.length); // 3
document.write("<br>");
document.write(box.childNodes[0] == range.startContainer); // true
document.write("<br>");
document.write(box.childNodes[2] == range.endContainer); // true
</script>Kolejny prosty przykład:
<!DOCTYPE html>
<html>
<head>
<script>
function insertNode(what){
var info = document.getElementById("info");
var box = document.getElementById("box");
// Tworzymy nowy zakres i ustawiamy przed jakąkolwiek zawartością w DIV
var range = document.createRange();
range.setStart(box, 0);
range.setEnd(box, 0);
var newNode = "";
if (what == "p"){
newNode = document.createElement("p");
newNode.textContent = "Treść wstawianego <p>."
}
else{
newNode = document.createElement("b");
newNode.textContent = "Treść wstawianego <b>."
}
// Wstawiamy węzeł 'newNode' do zakresu
range.insertNode(newNode);
var result = "range.startContainer: " + range.startContainer
+ "<br>" + "range.startOffset: " + range.startOffset
+ "<br><br>" + "range.endContainer: " + range.endContainer
+ "<br>" + "range.endOffset: " + range.endOffset;
info.innerHTML = result;
}
</script>
</head>
<body>
<div id="box" style="background-color:#e0a0b0">Zawartość kontenera DIV.</div>
<p>Kliknij konkretny przycisk by dodać nową treść na początku DIV za pomocą zakresu.</p>
<input type="button" value="insertNode(p)" onclick="insertNode('p')">
<input type="button" value="insertNode(b)" onclick="insertNode('b')">
<p style="color: blue;">Szczegółowe informacje dla zakresu:</p>
<p id="info"></p>
</body>
</html>Na chwilę obecną jedynie przeglądarka Chrome obsługuje metodę insertNode() zgodnie z najnowszymi wymaganiami specyfikacji DOM4, chociaż one wynikają bezpośrednio z zachowania Chrome (DOM - Bug 63, Mozilla - Bug 1211894).
Składnia Web IDL#
interface Range { void insertNode(Node node); }