Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

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

Поддержи проект!!! smile

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.

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

  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
    Скачать: Скачать пример из архива


Вас может еще заинтересовать список тем : #JS |
Последняя дата редактирования : 22.01.2021 02:25
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
outerhtml js outerhtml outerhtml javascript document body outerhtml

Последние комментарии :
Марат :
19/01/2021 01:13
Всегда пожалуйста!Приходите ещё!
подробнее.
аркадий :
19/01/2021 01:08
Спасибо!Меню вернулось. Класс!
подробнее.
Прохожий :
02/01/2021 10:44
Здравствуйте Марат!Спасибо Вам, за оперативность и развернутый ответ с примерами. И ОГРОМНОЕ спасибо, что…
подробнее.
Марат :
01/01/2021 03:30
И вас с Новым годом!Посмотрите …
подробнее.
Прохожий :
31/12/2020 03:58
А как проверить, чекнут ли чекбокс программно, то есть - другим скриптом, а не мышкой?Вот тут…
подробнее.