Document#

Document.createTextNode()#

Metoda createTextNode() tworzy nowy węzeł typu Text (pochodna węzłów znakowych) z określonymi danymi tekstowymi, którego właścicielem jest dany dokument.

Opis działania#

Samo wywołanie i poszczególne jego części najlepiej objaśnić na zapisie składniowym:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
var new_text = document.createTextNode(data);

gdzie poszczególne człony oznaczają:

Algorytm wywołania metody createTextNode(data) nie jest skomplikowany. Dla lepszego zrozumienia tematu prezentuję go w całości:

  1. Zwróć nowy węzeł typu Text z danymi tekstowymi wskazywanymi przez data, którego właścicielem jest obiekt kontekstu.

Metoda nie weryfikuje poprawności przekazanych danych tekstowych wymaganych dla węzłów tekstowych w przypadku XML-a, np. pod względem dopasowania do wzorca Char.

Nowy węzeł tekstowy zwracany przez metodę createTextNode() nie jest częścią danego drzewa dokumentu dopóki nie zostanie dodany do innego węzła należącego do drzewa dokumentu. Dlatego nowy węzeł tekstowy nie będzie posiadał rodzica (wartość null), aczkolwiek dalej posiada jakiegoś właściciela.

Obiekt zwracany przez metodę createTextNode() implementuje interfejs Text, dlatego ma dostęp do poleceń z tego interfejsu (oraz z kolejnych interfejsów w łańcuchu dziedziczenia).

Alternatywnie można skorzystać z podobnie działającego konstruktora new Text().

Prosty przykład:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<!DOCTYPE html>
<html>

<head>

	<script>

		function addText(data){

			var p = document.getElementById("tekst");
			var info = document.getElementById("info");

			var newText = document.createTextNode(data);
			p.appendChild(newText);

			info.innerHTML = "Liczba węzłów tekstowych w akapicie po kolejnym dodaniu nowego węzła: "
					+ p.childNodes.length
					+ "<br>" + "Interfejs nowego węzła: " + newText
					+ "<br>" + "Dane tekstowe nowego węzła: " + newText.data;

		}

	</script>

</head>

<body>
	<p>Kliknij konkretny przycisk by dodać nowy węzeł tekstowy do testowego akapitu.</p>
	<input type="button" value="createTextNode(' Test1')" onclick="addText(' Test1')">
	<input type="button" value="createTextNode(' Test2')" onclick="addText(' Test2')">
	<input type="button" value="createTextNode(null)" onclick="addText(null)">
	<input type="button" value="createTextNode('')" onclick="addText('')">
	<p id="tekst" >Węzeł tekstowy umieszczony w testowym akapicie.</p>

	<p style="color: blue;">Szczegółowe informacje o akapicie i nowym węźle tekstowym:</p>
	<p id="info"></p>
</body>

</html>

Składnia Web IDL#

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
interface Document : Node {
	[NewObject] Text createTextNode(DOMString data);
};

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Document (H1) Document.createTextNode() (H2) Opis działania (H3) Składnia Web IDL (H3) Specyfikacje i inne materiały (H3)