модификация HTML DOM
Изменить HTML = элементы изменения, атрибуты, стили и события.
Изменить HTML элементы
Изменить HTML DOM означает множество различных аспектов:
- Изменение содержимого HTML
- Изменение стилей CSS
- Изменение атрибутов HTML
- Создать новый элемент HTML
- Удалить существующие элементы HTML
- Изменить событие (обработчик)
В следующих разделах мы рассмотрим в глубину HTML DOM, чтобы изменить обычный метод.
Создание контента HTML
Самый простой способ изменить содержимое элемента использовать свойство innerHTML.
Следующий пример изменяет содержимое элемента HTML <p>:
примеров
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
Попробуйте »
 | Мы расскажем вам подробности, например, в следующих разделах. |
|---|
Стили Изменить HTML
Через HTML DOM, вы можете получить доступ к элементам HTML-стиля объекта.
В следующем примере изменить стиль HTML абзаца:
примеров
<html>
<body>
<body>
<p id="p2">Hello world!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
</body>
</html>
Попробуйте »
Создать новый элемент HTML
Чтобы добавить новый элемент в HTML DOM, вы должны сначала создать элемент (элемент узла), а затем добавить его к существующим элементам.
примеров
<div id="d1">
<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("d1");
element.appendChild(para);
</script>
<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("d1");
element.appendChild(para);
</script>
Попробуйте »