Latest web development tutorials
×

JavaScript курс

JavaScript курс JavaScript Краткое введение JavaScript использование JavaScript экспорт JavaScript грамматика JavaScript Заявления JavaScript примечание JavaScript переменная JavaScript Типы данных JavaScript объекты JavaScript функция JavaScript сфера JavaScript событие JavaScript строка JavaScript операторы JavaScript сравнить JavaScript If...Else JavaScript switch JavaScript for JavaScript while JavaScript Break & Continue JavaScript typeof JavaScript Тип преобразования JavaScript Регулярные выражения JavaScript ошибка JavaScript отладка JavaScript Переменный лифт JavaScript Строгий режим JavaScript ненадлежащее использование JavaScript Аутентификация с помощью форм JavaScript Зарезервированные ключевые слова JavaScript JSON JavaScript void JavaScript Спецификация Код

JS функция

JavaScript определение функции JavaScript Аргументы функции JavaScript вызов функции JavaScript Затворы

JS HTML DOM

DOM Краткое введение DOM HTML DOM CSS DOM событие DOM EventListener DOM элемент

JS Расширенный учебник

JavaScript объекты JavaScript Number JavaScript String JavaScript Date JavaScript Array JavaScript Boolean JavaScript Math JavaScript RegExp объекты

JS браузер BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript поп JavaScript Timed событие JavaScript Cookies

JS кладезь

JavaScript кладезь JavaScript тест jQuery JavaScript тест Prototype

JS примеров

JavaScript примеров JavaScript экземпляр объекта JavaScript экземпляр объекта Browser JavaScript HTML DOM примеров JavaScript резюме

JS справочное руководство

JavaScript объекты HTML DOM объекты

элементы DOM JavaScript HTML

Создать новый элемент HTML


Создать новый элемент HTML

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

примеров

<Div ID = "div1">
<P ID = "p1"> Это параграф. </ P>
<P ID = "p2"> Это еще один параграф. </ P>
</ Div>

<Script>
вар пункт = document.createElement ( "р");
вар узел = document.createTextNode ( "Это новый пункт.");
para.appendChild (узел);

вар элемент = document.getElementById ( "div1");
element.appendChild (пункт);
</ Script>

Попробуйте »


Примеры анализа:

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

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

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

вар узел = document.createTextNode ( "Это новый пункт.");

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

para.appendChild (узел);

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

Код, чтобы найти существующий элемент:

вар элемент = document.getElementById ( "div1");

Следующий код после существующих элементов добавить новый элемент:

element.appendChild (пункт);


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

Следующий код показывает, как удалить элементы:

примеров

<Div ID = "div1">
<P ID = "p1"> Это параграф. </ P>
<P ID = "p2"> Это еще один параграф. </ P>
</ Div>

<Script>
вар родитель = document.getElementById ( "div1");
вар ребенок = document.getElementById ( "p1");
parent.removeChild (ребенок);
</ Script>


Попробуйте »


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

HTML документ, содержащий дочерние узлы имеют (элемент два <р>) два элемента <div>:

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

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

вар родитель = 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 DOM Учебник

В HTML DOM часть нашего JavaScript учебник, вы узнали:

  • Как изменить содержимое HTML-элемента (innerHTML)
  • Как изменить стиль HTML-элементов (CSS)
  • Как реагировать на события на HTML DOM
  • Как добавлять или удалять элементы HTML

Если вы хотите узнать больше об использовании JavaScript для получения доступа к знания HTML DOM, пожалуйста , посетите наш полный HTML DOM учебник .