Latest web development tutorials

HTML DOM элементы

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

Создайте новый HTML-элемент - AppendChild ()

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

примеров

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

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

Попробуйте »

Примеры аналитических

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

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

Для добавления текста к элементу <р>, вы должны сначала создать текстовый узел. Этот код создает текстовый узел:

var node=document.createTextNode("This is a new paragraph.");

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

para.appendChild(node);

И, наконец, необходимо добавить этот новый элемент к существующим элементам.

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

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

Код для добавления нового элемента к существующим элементам:

element.appendChild(para);

Создайте новый HTML-элемент - InsertBefore ()

На одном примере AppendChild () метод, новый элемент в качестве последнего дочернего элемента родительского элемента для добавления.

Если вы не хотите этого, вы можете использовать метод InsertBefore ():

примеров

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

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("div1");
var child=document.getElementById("p1");
element.insertBefore(para,child);
</script>

Попробуйте »

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

Для удаления HTML-элементов, вы должны знать, родительский элемент элемента:

примеров

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

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>


Попробуйте »

Примеры аналитических

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

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

Найти элементы ID = "Div1":

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

Найти ID = элемент "P1" <p>:

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

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

parent.removeChild(child);

лампа Могу ли я удалить элемент в случае не относится к родительскому элементу?
Извините. DOM должны понимать те элементы, которые вы хотите удалить, а также его родительский элемент.

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

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

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

Для замены элементов HTML DOM, используйте метод replaceChild ():

примеров

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

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.replaceChild(para,child);
</script>

Попробуйте »