index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="1.js" defer></script>
</head>
<body>
<p id="out">Тестовый текст</p>
<hr>
<button onclick="out()">Push</button>
</body>
</html>
1.js
function out() {
var p;
p = document.getElementById('out');
// p.innerHTML = 'Hello'; // в параграфе выводится Hello
// p.innerHTML = ''; // параграф очистится
// Как дописать информацию: сохранить старый текст и добавить новый
// p.innerHTML += ' Hello'; // p.innerHTML + p.innerHTML + 'Hello'
// p.innerHTML += ' <b>Hello</b>'; // не работает в IE
// p.innerText += ' Hi'; // работает в IE и не обрабатывает тэги
// p.insertAdjacentHTML('beforeBegin', 'Hi'); // вставится перед параграфом
// p.insertAdjacentHTML('afterBegin', 'Hi'); // HiТестовый текст
// p.insertAdjacentHTML('beforeEnd', 'Hi');
// p.insertAdjacentHTML('afterEnd', 'Hi'); // вставляет после параграфа
/*
Метод insertAdjacentHTML позволяет вставить строку HTML кода в любое место страницы. Код вставляется относительно опорного элемента.
Можно сделать вставку перед опорным элементом (способ вставки beforeBegin), после него (способ вставки afterEnd), а также в начало (способ вставки afterBegin) или в конец (способ вставки beforeEnd) опорного элемента.
*/
// outerHTML заменяет тэг полностью
p.outerHTML = '<div class="one">Hello</div>';
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="1.js" defer></script>
</head>
<body>
<p id="out">Тестовый текст</p>
<hr>
<button onclick="out()">Push</button>
</body>
</html>
1.js
function out() {
var p;
p = document.getElementById('out');
// p.innerHTML = 'Hello'; // в параграфе выводится Hello
// p.innerHTML = ''; // параграф очистится
// Как дописать информацию: сохранить старый текст и добавить новый
// p.innerHTML += ' Hello'; // p.innerHTML + p.innerHTML + 'Hello'
// p.innerHTML += ' <b>Hello</b>'; // не работает в IE
// p.innerText += ' Hi'; // работает в IE и не обрабатывает тэги
// p.insertAdjacentHTML('beforeBegin', 'Hi'); // вставится перед параграфом
// p.insertAdjacentHTML('afterBegin', 'Hi'); // HiТестовый текст
// p.insertAdjacentHTML('beforeEnd', 'Hi');
// p.insertAdjacentHTML('afterEnd', 'Hi'); // вставляет после параграфа
/*
Метод insertAdjacentHTML позволяет вставить строку HTML кода в любое место страницы. Код вставляется относительно опорного элемента.
Можно сделать вставку перед опорным элементом (способ вставки beforeBegin), после него (способ вставки afterEnd), а также в начало (способ вставки afterBegin) или в конец (способ вставки beforeEnd) опорного элемента.
*/
// outerHTML заменяет тэг полностью
p.outerHTML = '<div class="one">Hello</div>';
}
Комментариев нет:
Отправить комментарий