CharacterData#

CharacterData.appendData()#

Metoda appendData() dodaje nową treść na końcu danych tekstowych skojarzonych z danym węzłem znakowym.

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. #
node.appendData(data);

gdzie poszczególne człony oznaczają:

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

  1. Zwróć wynik zastępowania danych tekstowych z węzłem będącym obiektem kontekstu, przesunięciem wskazywanym przez atrybut length w obiekcie kontekstu, licznikiem będącym wartością 0 oraz danymi tekstowymi wskazywanymi przez data.

Identyczny efekt uzyskamy poprzez wywołanie metody CharacterData.insertData(offset, data) z argumentami o następujących wartościach:

Identyczny efekt uzyskamy poprzez wywołanie metody CharacterData.replaceData(offset, count, data) z argumentami o następujących wartościach:

Warto nadmienić, że w obu przypadkach argument offset przekazywany do metody nie może być większy od wartości z właściwości CharacterData.length danego węzła znakowego, bo zrzucony zostanie błąd.

Alternatywnie można skorzystać z identycznie działających właściwości CharacterData.data, Node.nodeValue i Node.textContent (poprzez jednoczesny odczyt starej wartości i ustawieniu nowej wartości - wzorzec: A += B lub A = A + B).

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 addData(data){

			var cloneText = document.getElementById("tekst").firstChild.cloneNode();
			cloneText.appendData(data);
			document.getElementById("info").textContent = cloneText.data;

		}

	</script>

</head>

<body>
	<p>Kliknij konkretny przycisk by dodać na końcu starych danych tekstowych w testowym akapicie nowe dane tekstowe.</p>
	<input type="button" value="appendData('TEST1')" onclick="addData('TEST1')">
	<input type="button" value="appendData(' TEST2')" onclick="addData(' TEST2')">
	<input type="button" value="appendData(' TEST3 TEST3')" onclick="addData(' TEST3 TEST3')">
	<input type="button" value="appendData('')" onclick="addData('')">
	<input type="button" value="appendData(null)" onclick="addData(null)">
	<p id="tekst" >Węzeł tekstowy umieszczony w testowym akapicie.</p>

	<p style="color: blue;">Wynik działania przycisków:</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 CharacterData : Node {
	void appendData(DOMString data);
}

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

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