Элементы (узлы) HTML DOM на JavaScript

Добавление и удаление узлов (HTML элементов)

Создание нового HTML элемента (узла)

Чтобы добавить новый элемент в HTML DOM, сначала необходимо создать этот элемент (узел элемента), а затем добавить его к существующему элементу.

Пример

<div id="div1">
<p id="p1">Это абзац.</p>
<p id="p2">Это другой абзац.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("Это новый текст.");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>

Попробуйте сами

примеры

Этот код создает новый <p> Элемент:

var para = document.createElement("p");

Чтобы добавить <p> Чтобы добавить текст к элементу, необходимо сначала создать текстовый узел. Этот код создает текстовый узел:

var node = document.createTextNode("Это новый абзац.");

Затем вам нужно добавить текст к <p> Добавить этот текстовый узел к элементу:

para.appendChild(node);

В конечном итоге вам нужно добавить этот новый элемент к существующему элементу.

Этот код ищет существующий элемент:

var element = document.getElementById("div1");

Этот код добавляет новый элемент к этому существующему элементу:

element.appendChild(para);

Создание нового HTML-элемента - insertBefore()

В предыдущем примере appendChild() метод, чтобы добавить новый элемент в качестве последнего подузла родителя.

Кроме того, вы можете использовать insertBefore() Метод:

Пример

<div id="div1">
<p id="p1">Это абзац.</p>
<p id="p2">Это другой абзац.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("Это новый текст.");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

Попробуйте сами

удалить существующий HTML-элемент

Чтобы удалить HTML-элемент, используйте remove() Метод:

Пример

<div>
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>
<script>
const elmnt = document.getElementById("p1"); elmnt.remove();
</script>

Попробуйте сами

примеры

Этот HTML-документ содержит один элемент с двумя подузлами (двумя <p> элемента) <div> Элемент:

<div>
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

найти элемент для удаления:

const elmnt = document.getElementById("p1");

Затем выполните remove() Метод:

elmnt.remove();

Внимание:Метод remove() не работает в старых браузерах, см. следующий пример, чтобы узнать, как заменить его removeChild()。

не поддерживают

удаление подузлов remove() Методы браузера, поддерживающие

Пример

<div id="div1">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>
<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.removeChild(child);
</script>

Попробуйте сами

примеры

Этот HTML-документ содержит один элемент с двумя подузлами (двумя <p> элемента) <div> Элемент:

<div id="div1">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

найти id="div1" элементы:

const parent = document.getElementById("div1");

найти id="p1" с <p> Элемент:

const child = document.getElementById("p1");

Удаляем подузел из родительского элемента:

parent.removeChild(child);

Это обычный способ решения проблемы: находит удаляемый подузел и использует его parentNode Атрибут находит родительский узел:

const child = document.getElementById("p1");
child.parentNode.removeChild(child);

Заменить HTML элемент

Чтобы заменить элемент, используйте replaceChild() Метод:

Пример

<div id="div1">
<p id="p1">Это абзац.</p>
<p id="p2">Это другой абзац.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("Это новый текст.");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

Попробуйте сами