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

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


  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
Подписаться + =

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

Построение гравиков
Основа для графика : счетчик посещаемости.
На отдельной : странице.
dwweb.ru есть здесь:
Последние комментарии :
Марат :
14.03.2023 21:07
Так... это когда было то... в 2018 году... мне не нравится(не нравилось), как поиск по файлам... как-то коряво было…
подробнее.
Moubrey :
14.03.2023 20:52
Их там два можно поставить, еще и по бокам, а в них еще друге окна станут вкладками, обычный проводник и…
подробнее.
Марат :
26.02.2023 12:20
Спасибо за внимательность!
подробнее.
V :
26.02.2023 11:49
В массиве месяцев пропущен октябрь!
подробнее.
Марат :
02.02.2023 10:48
Я не знаю, что это ... Такое понятие - "определена"... я не понимаю, что такое... есть такая фигня в Js, там, бывают…
подробнее.
Артур :
02.02.2023 06:51
При копировании всего кода из 3 главы "Вывод всех файлов из папки ссылками на них", при выполнении скрипта…
подробнее.
ruweb Немного о ruweb.net!
Страница загружена за : 0.020961 секунд. Подробнее