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

Как заменить тег в js примеры

2019/08/31 Марат 714 0 #JS |

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

Что такое заменить тег js, как происходит замена тега в js все способы замены тега в html/ И на все приведенные описания замены тега будут живые примеры!

Всё о замене тега в javascript

  1. Что такое заменить тег js процесс замены тега
  2. Замена тега по названию тега без содержимого
  3. Замена тега по id тега с сохранением содержимого
  4. Как заменить тег по его классу!?
  5. Как заменить тег по его name!?
  1. Что такое заменить тег js процесс замены тега

    Заменить тег в js очень просто! Потому, что в javascript есть замечательная функция outerHTML, которая которая может работать во всем тегом целиком! И еще нам понадобится функция innerHTML, чтобы работать с содержимым тега! Если оно нам нужно!

    Схематично процесс замены тега вместе с содержимым

    <redblock>redblock</redblock>, и его меняем на на другой тег со всем содержимым <blackblock>black</blackblock>

    Схематично процесс замены тега вместе с сохранением содержимого

    <redblock>redblock</redblock>, меняем только тег, оставляя содержимое <blackblock>redblock</blackblock>

    И в обоих этих случаях нам потребуется скрипт, который обработает соответствующие наши хотелки! Дальше, только примеры!

  2. Замена тега по названию тега без содержимого

    1). Для того, чтобы что-то сделать нам потребуется обратиться к тегу, в этом примере будем использовать querySelector, у нас будет уникальный тег redblock
    <redblock>Здесь текст уникального тега redblock, который не будет сохранен при смене тега...</redblock>
    2). Еще нам понадобится другой тег с другим текстом... с любым...
    <blackblock>Это любой другой тег...black</blackblock>
    3). Чтобы процесс замены тега можно было увидеть в движении... нам нужна кнопка, по нажатию на которую и заменим весь тег с содержимым...
    <button id="button_id">Замени тег</button>
    4). Ну и собственно скрипт, который нам поменяет наш старый тег на любой другой тег - использованная функция onclick.

    <script>

    button_id.onclick = function()

    {

    document.querySelector("redblock") . outerHTML = "<blackblock>Это любой другой тег...black</blackblock>";

    }

    </script>

    Результат замены тега вместе с содержимым:

    Здесь текст уникального тега redblock, который не будет сохранен при смене тега...

    Для того, чтобы заменить тег, нажмите по кнопке!

  3. Замена тега по названию тега с сохранением содержимого

    Поскольку уже уникальный тег использовался, поэтому сделаем все манипуляции через уникальный id? мы можем воспользоваться функцией GetElementById, но уникальный id - позволяет обращаться с обьекту без этой функции

    1). Нам опять понадобится какой-то тег теперь с атрибутом id:
    <redblock id="no1">Здесь текст в блоке с уникальным id="no1"</redblock>
    2). Кнопка, нажимая на которую и будем менять наш тег.
    <button id="button_id_1">Замени тег</button>
    3). Скрипт, который заменит лишь теги, а содержимое возьмет изнутри тега с ид= no1 с помощью innerHTML, еще использовали outerHTML + onclick

    <script>

    button_id_1 .onclick = function()

    {

    no1 . outerHTML = "<blackblock>"+no1.innerHTML+"</blackblock>";

    }

    </script>

    Результат замены тага без смены содержимого

    Чтобы увидеть результат замены тага в реальном времени нажми на кнопку Замени тег Здесь текст в блоке с уникальным id="no1"

  4. Как заменить тег по его классу!?

    Абсолютно тоже самое только с использованием класса в качестве обращения к тегу!

    1). Нам понадобится: outerHTML + onclick + innerHTML + getElementsByClassName
    2). Нм опять понадобится какой-то блок. но уже ус уникальным классом:
    <redblock class="class_2">Здесь текст в блоке с классом class="class_2"</redblock>

    Если класс повторяющийся см.далее...

    3). У нас опять должна быть кнопка, по нажатию на которую мы изменим тег уже у тега, у котрого есть уникальный класс!
    <button id="button_id_2">Замени тег в блоке с уникальным классом</button>
    4). И скрипт, который обратится по классу к тегу, и заменит теги, а оставит содержимое тега.

    <script>

    document.getElementsByClassName("class_2")[0]. outerHTML = "<blackblock>"+document.getElementsByClassName("class_2")[0].innerHTML+"</blackblock>";

    }

    </script>

    Результат замены тега по его классу:

    Чтобы заменить только тег по его классу, нажмите на кнопку Замени тег в блоке с уникальным классом!
    Здесь текст в блоке с классом class="class_2"

    Здесь в скрипте, вы должны были обратить внимание на квадратные скобки с числом внутри! getElementsByClassName - получает HTMLCollection, похожую на массив, поэтому если стоит 0, то это первый класс по счету с начла страницы!

  5. Как заменить тег по его name!?

    Как заменить тег по его name, для этого нам нужен тег поддерживающий name + функция getElementsByName - все остальное как под копирку из выше идущего примера... заменяем getElementsByClassName на getElementsByName...

    Результат замены тега по его name с помощью функции getElementsByName


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

Подписаться + =
Теги:
Как заменить тег javascriptjs изменить один тег на другой

Последние комментарии :
Марат :
27/10/2020 10:32
Всё можно, только нужно задаться…
подробнее.
grek :
26/10/2020 08:29
А вперемешку английские и русские буквы как тут https://адрес скрыт…
подробнее.
Марат :
23/10/2020 01:15
Посмотрел... количество возможных знаков 3... почему у вас не получилось увидеть 2...…
подробнее.
Марат :
23/10/2020 01:05
Да! Тоже исправим...А с ссылкой... вроде бы исправлял... совсем недавно...сейчас проверю в чем там…
подробнее.
Марат :
23/10/2020 01:03
Спасибо за внимательность!1). Исправлено!2). Что-то я сразу не понял, о каком подтверждении идет речь!?О любых…
подробнее.