СКРИПТЫ
ТЕГИ:
php (285)
js (167)
html (139)
css (119)
html tags (61)
jquery (40)
text (37)
form html (30)
php array (30)
fonts (27)
ruweb.net (23)
foto (22)
online (22)
Показать еще :
php file (21)
atom (20)
forum (19)
svg (18)
board (17)
hosting (17)
js method (16)
html book (16)
input (16)
link (15)
color (15)
php date (15)
js events (14)
htaccess (13)
table (13)
osclass (13)
dw block (12)
path (12)
select (12)
js delete (12)
icon (11)
keyboard (11)
jsphp (11)
php img (11)
info (11)
img (11)
php time (11)
form (11)
download (11)
notepad (11)
url (10)
mouse (10)
js time (9)
yandex (9)
cookie (7)
php url (7)
comment (7)
dosite (7)
task (7)
hover (7)
iframe (6)
list (6)
year (6)
mysql (6)
click (6)
js url (6)
ftp (5)
heading (5)
php get (5)
search (5)
adminka (5)
js id (5)
browser (5)
mb (5)
value (5)
chart (5)
week (4)
mounth (4)
bbcode (4)
day (4)
нок (4)
reg.ru (4)
vk (4)
submit (4)
captcha (4)
js form (4)
console (4)
symbols (4)
ucoz (3)
js post (3)
line (3)
https (3)
pages (3)
scandir (3)
ssl (3)
js img (3)
vs code (3)
padding (3)
куб (2)
js vars (2)
video (2)
youtube (2)
seo (2)
details (2)
title (2)
cursor (2)
base64 (2)
second (2)
tag hr (2)
money (2)
рся (2)
typeof (2)
arrows (2)
counter (2)
height (2)
qr kod (2)
sitemap (2)
нод (1)
windows (1)
google (1)
header (1)
numbers (1)
archive (1)
domen (1)
speed (1)
books (1)
smile (1)
scroll (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
    Скачать: Скачать пример из архива

Пользуйтесь на здоровье! Не забудьте сказать спасибо
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =

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

Построение гравиков
Основа для графика : счетчик посещаемости.
На отдельной : странице.
Последние комментарии :
Марат :
07.07.2022 13:02
Вам спасибо, что оценили! На ваш вопрос в одной строчке не ответишь, поэтому для вас отдельный пункт…
подробнее.
Борис :
07.07.2022 10:41
Спасибо за статью! Подскажите, пожалуйста, как сделать, чтобы файл создавался по имени из формы? Есть тест,…
подробнее.
вывы :
05.06.2022 12:32
сейчас яндекс добавил индексацию js в…
подробнее.
Марат :
02.06.2022 20:14
Михаил :
02.06.2022 20:10
Ну вот только для этого может быть ;) А так, нет смысла…
подробнее.
Марат :
02.06.2022 15:59
Чтобы вы зашли на данную страницу и нажали на…
подробнее.
ruweb
Страница загружена за : 0.021704 секунд. Подробнее