В связи с переходом на новый движок... возможны сбои в работе! Простите!
Работы производятся прямо сейчас 19-03-2024! 🞨
Меню :
js tag (56)
js (244)



Blog (1392)
php (329)
js (244)
html (147)
css (131)
html tags (62)
js tag (56)
jquery (42)
text (37)
js method (36)
php array (33)
js date (33)
form html (30)
online (29)
Показать еще :
fonts (26)
ruweb.net (25)
foto (22)
php file (20)
atom (20)
forum (19)
hosting (18)
svg (18)
input (18)
php date (17)
board (16)
php time (16)
html book (16)
color (15)
info (15)
img (14)
js time (14)
js url (14)
js events (14)
htaccess (13)
select (13)
notepad (13)
osclass (13)
keyboard (12)
знак (12)
dw block (12)
php img (12)
php path (12)
table (12)
download (12)
icon (11)
form (11)
jsphp (11)
alphabet (10)
keyframes (10)
js delete (10)
yandex (10)
mouse (10)
chart (9)
hover (9)
dosite (8)
browser (8)
php post (7)
comment (7)
php url (7)
iframe (6)
php get (6)
mysql (6)
click (6)
list (6)
canvas (6)
adminka (6)
vs code (6)
js id (5)
mb (5)
heading (5)
value (5)
reg.ru (5)
ftp (5)
year (5)
js math (5)
tag a (5)
bbcode (4)
php var (4)
base64 (4)
xml (4)
scandir (4)
games (4)
flags (4)
symbols (4)
week (4)
day (4)
ssl (4)
нок (4)
submit (4)
task (4)
vk (4)
month (4)
pages (4)
console (4)
js form (4)
domen (3)
line (3)
https (3)
js post (3)
jquery post (3)
money (3)
numbers (3)
js img (3)
padding (3)
куб (3)
captcha (3)
ucoz (3)
js hash (3)
tag hr (2)
details (2)
typeof (2)
seo (2)
prompt (2)
sitemap (2)
рся (2)
youtube (2)
height (2)
arrows (2)
js vars (2)
counter (2)
google (2)
qr kod (2)
video (2)
speed (1)
smile (1)
нод (1)
rutube (1)
scroll (1)
windows (1)
archive (1)
jino (1)
cursor (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.

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


  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
    Скачать: Скачать пример из архива
Не стесняемся говорить спасибо!
Помочь проекту DwWeb.ru

Поделиться ссылкой! C друзьями или врагами!

Этим вы очень поможете проекту! Заранее огромное спасибо!

Ещё : dwweb.ru есть здесь:
ruweb
Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2024 Контакты. Реклама на сайте Лучший хостинг : RUWEB + помощь по RUWEB
Страница загружена за : 0.018259 секунд. Подробнее