СКРИПТЫ
ТЕГИ:
php (282)
js (149)
html (131)
css (100)
html tags (57)
edit text (39)
jquery (39)
php array (30)
form html (29)
fonts (22)
foto (21)
atom (20)
ruweb.net (20)
forum (19)
hosting (19)
board (17)
svg (17)
Показать еще :
js method (16)
html book (16)
php file (15)
link (15)
osclass (13)
htaccess (13)
color (13)
table (13)
path (12)
online (12)
php date (12)
js delete (11)
input (11)
download (11)
jsphp (11)
icon (11)
notepad (11)
yandex (10)
mouse (10)
url (10)
php img (10)
form (10)
info (9)
task (7)
comment (7)
ftp (7)
cookie (7)
php url (7)
img (7)
dosite (6)
js url (6)
hover (6)
click (6)
iframe (5)
mb (5)
chart (5)
reg.ru (5)
adminka (5)
search (5)
value (5)
php get (5)
js time (4)
select (4)
bbcode (4)
vk (4)
submit (4)
symbols (4)
browser (4)
js form (4)
js copy (4)
js id (4)
console (3)
js post (3)
scandir (3)
ucoz (3)
https (3)
ssl (3)
captcha (3)
vs code (3)
qr kod (2)
sitemap (2)
details (2)
cursor (2)
tag hr (2)
video (2)
height (2)
title (2)
js vars (2)
counter (2)
youtube (2)
seo (2)
domen (1)
archive (1)
numbers (1)
speed (1)
smile (1)
padding (1)
books (1)
google (1)
header (1)
windows (1)
money (1)

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

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

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

Удивительно, но об outerHTML – мало знают вообще! Хотя это практически старший брат другого свойства, но outerHTML получает все вместе с тегами самого блока.
Навигация по странице :
  1. Что такое outerHTML!?
  2. Самый простой пример применения outerHTML
  3. Чем отличается outerHTML и innerHTML!?
  4. Получаем данные через outerHTML и выводим alert!
  5. Скачать пример из архива
  6. Заменяем данные через outerHTML вместе с тегом.
  7. Скачать пример из архива
  8. Получим и заменим данные через outerHTML вместе с тегом.
  9. Скачать пример из архива

  1. Что такое outerHTML!?

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

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

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

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

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

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


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

    Чтобы сразу не запутаться окончательно в следующих пунктах - сделаем самый "простой пример применения outerHTML"
    Давайте начнем с результата:
    Получим данный текст с наружным тегом
    Сравните, разницу между outerHTML и innerHTML

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

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

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

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

    Тег div.

    Тег button.

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

    Событие onclick


  3. Чем отличается 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>


  4. Получаем данные через 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

    Скачать: Скачать пример из архива


  5. Заменяем данные через 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

    Скачать: Скачать пример из архива


  6. Получим и заменим данные через 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
    Скачать: Скачать пример из архива

Пользуйтесь на здоровье! Не забудьте сказать спасибо

Сообщение системы комментирования :

01.09.2021

Форма пока доступна только админу... скоро все заработает...надеюсь...

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
17.10.2021 39:28
Давно не делал и страницу и видео в один день... чет, как-то выжитый как…
подробнее.
Марат :
10.10.2021 17:20
Добавлен новый смайл
подробнее.
Марат :
05.10.2021 26:37
Страница sitemap.html восстановлена. Но будут вводиться только страницы…
подробнее.
Марат :
04.10.2021 38:22
Добавил несколько вариантов поставить смайл на страницу своего сайта! 3 варианта! Кроме варианта скачать…
подробнее.
Марат :
17.09.2021 28:02
Установка Яндекс поиск на сайт! Контент обновлен на 100%. Такое ощущение, что старый текст не я…
подробнее.
Марат :
07.09.2021 23:21
Частенько приходится исправлять ошибки и вот...как-то я обратил внимание на надпись: "нажми ctrl enter" на сайте и…
подробнее.
ruweb
Страница загружена за : 0.030108 секунд. Подробнее