Основы JavaScript Учебник

Объекты JavaScript

Функции JavaScript

JS HTML DOM

JS Браузер BOM

Основы AJAX Учебник

JavaScript Референс Мануал

Изменение CSS с помощью JS DOM Выборщики JS HTML DOM

Изменение HTML-контента с помощью JS DOM

HTML DOM позволяет JavaScript получить и изменить содержимое HTML-элементов.

Изменение содержимого HTML

Самый простой способ изменить содержимое HTML-элемента - это использоватьinnerHTMLсвойство.

Чтобы изменить содержимое HTML-элемента, используйте следующий синтаксис:

element.innerHTML = text

Ниже приведен пример использованияid="para" element.attribute = new valueсвойство<p>

Пример

Метод записывает текстовую строку в поток документа.
<!DOCTYPE html>
<p id="para"></p>
<button onclick="myFunc()">Нажми меня</button>
document.getElementById("para").innerHTML = "Hello world";
}
<p>Метод document.write() записывает текстовую строку в поток вывода документа:</p>

Проверка‹/›

Нажмите кнопку, чтобы изменить аватар:ниже приведен примерid="para"id="para"свойство<p>

Пример

Метод записывает текстовую строку в поток документа.
<!DOCTYPE html>
содержимое элемента:
<p id="para">Это абзац.</p>
<button onclick="myFunc()">Нажми меня</button>
<p id="result"></p>
var x = document.getElementById("para").innerHTML;
}
<p>Метод document.write() записывает текстовую строку в поток вывода документа:</p>

Проверка‹/›

document.getElementById("result").innerHTML = x;

изменить поток выводаdocument.write()

Пример

Метод записывает текстовую строку в поток документа.
<!DOCTYPE html>
<html>
<button onclick="myFunc()">Нажми меня</button>
function myFunc() {
}
<p>Метод document.write() записывает текстовую строку в поток вывода документа:</p>

Проверка‹/›

</html>

Этот метод записывает содержимое в текущий документ только при его парсинге.

Пример

Если использовать этот метод после загрузки страницы, он заменит все существующее содержимое документа.
<button onclick="myFunc()">Нажми меня</button>
<script>
　　function myFunc() {
document.write(new Date());
}

Проверка‹/›

</script>

изменить значение атрибута

Чтобы изменить значение HTML-атрибута, используйте следующий синтаксис:

Нажмите кнопку, чтобы изменить аватар:element.attribute = new valueизменить<img>элементазначение属性:

женский

Нажмите кнопку, чтобы изменить аватар:ниже приведен примерполучитьhrefзначение属性:

Пример

var x = document.getElementById("demo").href;

Проверка‹/›

добавить новый элемент в DOM

Вы можете использоватьdocument.createElement()метод явно создает новый элемент в HTML-документе.

Этот метод создает новый элемент, но не добавляет его в DOM. Вы должны выполнить это в отдельном шаге:

　　// Создать новый элемент h3
　　var newElem = document.createElement("h3");
　　// И предоставить ему некоторые содержимое
　　var newContent = document.createTextNode("Привет, все!");

appendChild()метод добавляет новый элемент в любой другой подэлемент указанного родительского узлав конце.

Пример

// Добавить текстовый узел к новому созданному h3
newElem.appendChild(newContent);　　
// Добавить созданный новый элемент и его содержимое в DOM
document.body.appendChild(newElem);

Проверка‹/›

Но если нужно в других любых подпунктахНачалоЕсли нужно добавить новый элемент, то можно использоватьinsertBefore()Метод.

Пример

// Создать новый h3 элемент
var newElem = document.createElement("h3");
// Дать ему немного содержимого
var newContent = document.createTextNode("Hi there and greetings!");
// Добавить текстовый узел к новому созданному h3
newElem.appendChild(newContent);　　
// Получить Body
var body = document.body;
// Вставить H3 перед первым подузлом BODY
body.insertBefore(newElem, body.childNodes[0]);

Проверка‹/›

Удаление существующего элемента из DOM

Таким же образом, вы можете использоватьremoveChild()Метод удаления подузла из DOM.

Пример

var div = document.getElementById("demo");
div.removeChild(div.firstElementChild);

Проверка‹/›

Изменение CSS с помощью JS DOM Выборщики JS HTML DOM