элементы DOM JavaScript HTML
Создать новый элемент HTML
Создать новый элемент HTML
Чтобы добавить новый элемент в HTML DOM, вы должны сначала создать элемент (элемент узла), а затем добавить элемент к существующему элементу.примеров
<P ID = "p1"> Это параграф. </ P>
<P ID = "p2"> Это еще один параграф. </ P>
</ Div>
<Script>
вар пункт = document.createElement ( "р");
вар узел = document.createTextNode ( "Это новый пункт.");
para.appendChild (узел);
вар элемент = document.getElementById ( "div1");
element.appendChild (пункт);
</ Script>
Попробуйте »
Примеры анализа:
Этот код создает новый элемент <p>:
Для добавления текста к элементу <р>, вы должны сначала создать текстовый узел. Этот код создает текстовый узел:
Затем необходимо добавить текстовый узел к элементу <р>:
И, наконец, необходимо добавить этот новый элемент к существующему элементу.
Код, чтобы найти существующий элемент:
Следующий код после существующих элементов добавить новый элемент:
Удалить существующие элементы HTML
Следующий код показывает, как удалить элементы:
примеров
<P ID = "p1"> Это параграф. </ P>
<P ID = "p2"> Это еще один параграф. </ P>
</ Div>
<Script>
вар родитель = document.getElementById ( "div1");
вар ребенок = document.getElementById ( "p1");
parent.removeChild (ребенок);
</ Script>
Попробуйте »
Примеры аналитических
HTML документ, содержащий дочерние узлы имеют (элемент два <р>) два элемента <div>:
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
Найти элементы ID = "Div1":
Найти ID = элемент "P1" <p>:
Удалить из родительского элемента подэлементов:
Если вы можете удалить элемент без ссылки на родительский элемент, это было бы здорово. Но, к сожалению. DOM элементы, которые вы должны знать, чтобы быть удалены, а также его родительский элемент. |
Это общее решение: найти дочерний элемент, который вы хотите удалить, а затем использовать его свойства, чтобы найти ParentNode родительский элемент:
child.parentNode.removeChild(child);
HTML DOM Учебник
В HTML DOM часть нашего JavaScript учебник, вы узнали:
- Как изменить содержимое HTML-элемента (innerHTML)
- Как изменить стиль HTML-элементов (CSS)
- Как реагировать на события на HTML DOM
- Как добавлять или удалять элементы HTML
Если вы хотите узнать больше об использовании JavaScript для получения доступа к знания HTML DOM, пожалуйста , посетите наш полный HTML DOM учебник .