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

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

2019/09/03 Марат 889 0 #JS |

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

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

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

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

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

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

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

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

    <a id="example_2">содержание внутри блока outerHTML</a>
    Блок в коде: содержание внутри блока 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, потому, что с помощью него можно обратиться хоть к ид, хоть к классу, хоть напрямую к тегу.

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

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

    Получить данные с помощью 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


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

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

Последние комментарии :
Паула :
23/10/2020 01:26
Это <a href=здесь_ссылка …
подробнее.
Паула :
23/10/2020 01:24
Привет мир! <img src="https://dwweb.ru/__img/page/2020_10_23_01_13.png" class="img_in_comm">
подробнее.
Марат :
23/10/2020 01:15
Посмотрел... количество возможных знаков 3... почему у вас не получилось увидеть 2...…
подробнее.
Марат :
23/10/2020 01:05
Да! Тоже исправим...А с ссылкой... вроде бы исправлял... совсем недавно...сейчас проверю в чем там…
подробнее.
Марат :
23/10/2020 01:03
Спасибо за внимательность!1). Исправлено!2). Да... будет добавлено, просто не подумал об…
подробнее.