Использование outerHTML для замены вместе с тегом с примерами

OuterHTML - что это? Как использовать outerHTML!? Примеры использования outerHTML!

Все эти вопросы об outerHTML мы рассмотрим на данной странице.

Удивительно, но об outerHTML – мало знают вообще! Хотя это практически старший брат другого свойства, но outerHTML получает все вместе с тегами самого блока.

1. Что такое outerHTML!?
2. Самый простой пример применения outerHTML
3. Чем отличается outerHTML и innerHTML!?
4. Получаем данные через outerHTML и выводим alert!
Скачать пример из архива
5. Заменяем данные через outerHTML вместе с тегом.
Скачать пример из архива
6. Получим и заменим данные через outerHTML вместе с тегом.
Скачать пример из архива

Что такое outerHTML!?

В самом начале дадим определение : "Что такое outerHTML"

outerHTML – это свойство, которое может получать все данные из блока вместе с тегами этого блока.

В качестве иллюстрации:

Предположим, что нам потребуется использовать outerHTML для тега с текстом "текст внутри тега", то если мы обратимся к данному тегу и будем использовать outerHTML, то получим и текст и тег:

И конечно же!

Вы должны понимать, что:

Не только можно получить данные с помощью outerHTML.

Но и отправить.




Самый простой пример применения outerHTML

Чтобы сразу не запутаться окончательно в следующих пунктах - сделаем самый "простой пример применения outerHTML"

Давайте начнем с результата:
Получим данный текст с наружным тегом
нажми на меня. Сравните, разницу между outerHTML и innerHTML


Html код в примере:

<div id="first_example">Получим данный текст с наружным тегом</div>

<button onclick="alert(first_example.outerHTML)">нажми на меня.</button>

Что использовали для данного примера!?

Тег div.

Тег button.

Идентификатор id.

Событие onclick




Чем отличается outerHTML и innerHTML!?

innerHTML - получает внутри блока. Если написать такую конструкцию alert(example.innerHTML) то мы получим содержание внутри блок
<a id="example">содержание внутри блока</a>
Блок в коде: содержание внутри блока innerHTML
проверь сам Использованный код:

<a id="example">содержание внутри блока innerHTML</a>

<button onclick="alert(example.innerHTML)">проверь сам</button>

Простой пример использования outerHTML

Но если мы поместим в alert(example_2.outerHTML), то outerHTML вернет все вместе с тегами этого блока.

<a id="example_2">содержание внутри блока outerHTML</a>
Блок в коде: содержание внутри блока outerHTML
проверь сам Использованный код:

<a id="example_2">содержание внутри блока outerHTML</a>

<button onclick="alert(example_2.outerHTML)">проверь сам</button>




Получаем данные через outerHTML и выводим alert!

В следующем примере разберем вариант получения данных через outerHTML и выводом их через alert. Это классическая вариант простого примера


Нам понадобится div:

<div id="example" style="border:1px solid red">Этот текст вместе с тегом, получен через <strong>outerHTML</strong> и выведен через alert</div>

Кнопка button, по которой будем нажимать, чтобы увидеть процесс вживую.

<button id="button">нажми на меня.</button>

Javascript

С помощью querySelector - получаем объекты.

Соединяем onclick + alert

id_button .onclick = function(){alert(id_example .outerHTML);};

Соберем весь код вместе:

Html:

<div id="example" style="border:1px solid red">Этот текст вместе с тегом, получен через <strong>outerHTML</strong> и выведен через alert</div>

<button id="button">нажми на меня.</button>

Javascript

<script>

var id_button = document.querySelector("#button");//получаем объект button

var id_example = document.querySelector("#example");//получаем объект example

id_button .onclick = function(){alert(id_example .outerHTML);};//получаем данные из example

</script>

Результат:
Этот текст вместе с тегом, получен через outerHTML и выведен через alert
нажми на меня. Скачать: Скачать пример из архива



Заменяем данные через outerHTML вместе с тегом.

Следующий пункт разберем замену тега вместе с тегом с помощью outerHTML.

Если вы посмотрите на код и сравните с предыдущим вариантом, то должны заменить, что вместо alert у нас новая строка:

id_example .outerHTML="<mark>Новый текст с новым тегом</mark>";

Остальное так же...

Html:

<div id="example" style="border:1px solid red">Этот текст вместе с тегом, будет заменен через <strong>outerHTML</strong></div>

<button id="button">нажми на меня.</button>

Javascript

<script>

var id_button = document.querySelector("#button");//получаем объект button

var id_example = document.querySelector("#example");//получаем объект example

id_button .onclick = function(){id_example .outerHTML="<mark>Новый текст с новым тегом</mark>";};//Передадим данные из example

</script>

Результат:
Этот текст вместе с тегом, будет заменен через outerHTML
нажми на меня. Скачать: Скачать пример из архива



Получим и заменим данные через outerHTML вместе с тегом.

Далее разберем пример получения данных вместе с тегом с помощью outerHTML и заменим его на другой тег с другим текстом!

Что изменим и добавим!?

Добавим второй блок:

<div id="example_5">Сюда будем вставлять текст с тегом из выше приведенного блока с помощью <strong>outerHTML</div>

Получим объект по этому id:

var id_example_2 = document.querySelector("#example_2")

Покрасим два блока в разный цвет:

<style>#example_4{ max-width: 300px; border: 1px solid red ; } #example_5{ max-width: 300px; border: 1px solid blue ; }</style>

Заменим строку внутри функции на

id_example_2.outerHTML=id_example.outerHTML;

Соберем весь код и применим :

Результат:
Отсюда будем брать текст с тегом с помощью outerHTML
нажми на меня.
Сюда будем вставлять текст с тегом из выше приведенного блока с помощью outerHTML
Скачать: Скачать пример из архива