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

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

2019/08/31 Марат 394 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
Теги:
Как заменить тег javascriptjs изменить один тег на другой

Последние комментарии :
Александр :
04/06/2020 01:42
Спасибо)
подробнее.
admin :
20/05/2020 10:36
Как бы смешно это не звучало! Но! Запускается новая система комментирования COMMENTS+ 1.5. в тестовом режиме!От…
подробнее.
Паула :
21/05/2020 04:48
Вообще мне очень нравится, что вы делаете! И ваш подход! И ваш стиль!И не обращайте внимание на всяких…
подробнее.
admin :
21/05/2020 05:03
Я Вас помню! Вы частенько оставляли сообщения на сайте!Все никак не мог спросить!? У Вас есть сайт -> зачем это…
подробнее.

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2020 Мы на лучшем хостинге -> ruweb