Меню
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP КАК СДЕЛАТЬ ПРОГРАММЫ SW3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS КИБЕРБЕЗОПАСНОСТЬ НАУКА О ДАННЫХ
     ❯   

JS Учебник


JS Версии


JS Объекты


JS Функции


JS Классы


JS Асинхронный


JS HTML DOM


JS Браузер BOM


JS Веб APIы


JS AJAX


JS JSON


JS или jQuery


JS Графика


JS Примеры


JS Рекомендация




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



Добавление и удаление узлов (элементы 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">Это параграф.</p>
<p id="p2">Это еще один параграф.</p>
</div>

<script>
var elmnt = document.getElementById("p1");
elmnt.remove();
</script>
Попробуйте сами »

Объяснение примера

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

<div>
<p id="p1">Это параграф.</p>
<p id="p2">Это еще один параграф.</p>
</div>

Найдите элемент, который хотите удалить:

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

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

elmnt.remove();

Метод remove() не работает в старых браузерах, см. Пример ниже о том, как его использовать removeChild().


Удаление дочернего узла

Для браузеров, которые не поддерживают remove() метод, вам нужно найти родительский узел, чтобы удалить элемент:

Пример
<div id="div1">
<p id="p1">Это параграф.</p>
<p id="p2">Это еще один параграф.</p>
</div>

<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>
Попробуйте сами »

Объяснение примера

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

<div id="div1">
<p id="p1">Это параграф.</p>
<p id="p2">Это еще один параграф.</p>
</div>

Найдите элемент с помощью id="div1":

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

Найдите <p> элемент с помощью id="p1":

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

Удаляем ребенка от родителя:

parent.removeChild(child);

Вот обычный обходной путь: найдите дочерний элемент, которого вы хотите удалить, и используйте его parentNode свойство, чтобы найти родительский элемент:

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

Замена HTML элементов

Чтобы заменить элемент в HTML DOM, используйте 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>
Попробуйте сами »


×

Связаться с отделом продаж

Если вы хотите использовать услуги schoolsw3 как образовательное учреждение, команда или предприятие, отправьте нам электронное письмо:
sales@schoolsw3.com

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, отправьте нам электронное письмо:
help@schoolsw3.com

Schoolsw3 оптимизирован для обучения и подготовки. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно проверяются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего контента.
При использовании Schoolsw3 вы соглашаетесь прочитать и принять наши условия использования,
политику использования файлов cookie и конфиденциальности.

Авторское право 1999- принадлежит Refsnes Data. Все права защищены. Schoolsw3 работает на SW3.CSS.