ГЛАВНАЯ | HTML | CSS | PHP | JS | ЕЩЁ |

outerHTML использование примеры

2019/09/03 Марат 50 0 JS |

Что такое outerHTML? Как использовать outerHTML!? Пример использования outerHTML!

И чем отличается innerHTML от outerHTML.

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

И раз уж сегодня мы сделали страницу о младшем брате, то не рассмотреть тему outerHTML – будет не совсем правильно!

  1. Теория о outerHTML – что такое outerHTML!?

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

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

    innerHTML - получает внутри блока, а outerHTML вместе с тегами этго блока.

  3. Как работает outerHTML!?

    С теорией закончили… теперь самое интересное практика с использованием outerHTML.

    Чтобы использовать outerHTML – нам понадобится любой блок с текстом и немного стилей к классу, чтобы выделить данный блок, добавим ему бордюр(обращаю ваше внимание на бордюр):

    <style>.example { max-width: 300px; border: 1px solid red ; }</style>

    <div class="example">В див поместим текст, который будет выходить за края нашего дива – не растягивая его!</div>

    Результат:
    Здесь текст либо полученный, или выведенный с помощью outerHTML

  4. Получение содержимого блока с помощью outerHTML!?

    Большинство свойств в javascript используются и применяются по одному алгоритму.

    Нам понадобится некая конструкция, которая может иметь разный вид, но в конце все равно будет стоять outerHTML.

    Чтобы обратиться к выше представленному блоку, нам понадобится querySelector

    Я чаще всего использую его, потому, что с помощью querySelector-а можно обратиться хоть к ид, хоть к классу, хоть напрямую к тегу.

    document.querySelector(".example").outerHTML;

  5. Вывод полученного содержимого блока с помощью outerHTML!?

    Получить и вывести можно любым способом, если вы откроете консоль , то увидите результат работы вот такой конструкции:
    <script>console.log(document.querySelector(".example").outerHTML);</script>
    Эту картинку, скриншот, можно увеличить в отдельном окне нажмите по нему!outerHTML использование примеры
  6. Вывод содержимого блока с помощью outerHTML через alert.

    Поместим данные полученные с помощью outerHTML в переменную.

    И по нажатию на кнопку button выведем полученные данные через alert

    <script>peremennay = document.querySelector(".example").outerHTML ;</script>
    <button onclick="alert(peremennay);">Нажми на меня</button>
    Результат:
  7. Как получить содержимое блока с помощью outerHTML и передать его в другой блок.

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

    <div class="example">Здесь текст либо полученный, или выведенный с помощью outerHTML</div>

    <div class="example_1">Здесь ничего нет</div>

    <script>peremennay = document.querySelector(".example").outerHTML ;</script>

    <script>document.querySelector(".example_1").outerHTML = peremennay;</script>
    Результат:

    Вы ничего не увидели, потому, что замена произошла во время загрузки документа.

    Здесь ничего нет

  8. Как получить содержимое блока с помощью outerHTML и передать его в другой блок по нажатию.

    Получаем данные в переменную аналогично верхним вариантам, опять эти данные помещаем в переменную. Н кнопку вешаем функцию, во внутрь функции помещаем строчку из верхнего варианта.

    И в случае нажатия на кнопку, данные, которые будут получены с помощью outerHTML

    <div class="example_2">Сюда перместится текст из div с классом example</div>

    <script>peremennay = document.querySelector(".example").outerHTML ;</script>

    <script>function myFoo(){document.querySelector(".example_2").outerHTML = peremennay;}</script>

    <button onclick="myFoo();">Нажми на меня</button>

    Результат:
    Сюда перместится текст из div с классом example
Не забудь !
Оставить комментарийCOMMENTS+
Сообщений пока нет - Вы можете стать первым
BBcode
нажмите, чтобы загрузить аватар
Загрузить свой аватар(max ширина, высота = 100px) ( как это работает)

Закрыть
+=
Подписаться
Теги:
outerhtmljquery outerhtmljs outerhtmlouterhtml javascriptinnerhtml outerhtmldocument body outerhtml

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2019