DWWEB.RU
СКРИПТЫ

Как заменить тег javascript

2019/08/31 Марат 106 0 JS |

Как заменить тег javascript - ради интереса посмотрел, что пишут в интернете по поводу замены тега вместе с содержимым или без… иногда у меня возникают мысли, которые нельзя выразить цензурно…

Если примерно, как высказался наш гениальный Лавров!

У нас стоит задача в тексте с кодом, на странице, заменить известный тег, вместе с содержимым или оставить содержимое!

Оба варианта рассмотрим.

Вариант №1 замена тега вместе с содержимым.

Будем использовать для этой цели:

  1. querySelector
  2. Почему querySelector - он наиболее универсален, с его помощью можно обратиться, хоть к классу, хоть к ид, хоть к тегу…

  3. И "outerHTML"
  4. - это "innerHTML" , только вместе с тегами.

  5. Onclick
  6. Ну что… погнали!

    Нам понадобится

  7. Кнопка
  8. Возьмем кнопку button с каким-то уникальным ид= show_fone во внутрь тега поместим любой текст можно с кодом… давайте покрасим в красный цвет…

    <button id="show_fone"><red>НАЖМИ НА МЕНЯ </red></button>

  9. Переменная и querySelector
  10. Получим объект в переменную...

    var show_fone = document.querySelector("#show_fone");
  11. onclick + function и outerHTML
  12. Соберем конструкцию, которая и будет заменять наш тег...

    show_fone.onclick = function() { show_fone.outerHTML = "<green>Привет мир!</green>" }

  13. Весь код в сборе...
  14. <button id="show_fone"><red>НАЖМИ НА МЕНЯ </red></button>

    <script>var show_fone = document.querySelector("#show_fone"); show_fone.onclick = function() { show_fone.outerHTML = "<green>Привет мир!</green>" }</script>

    </ol>

  15. Результат:

Вариант №2 замена тега без замены содержимого.

Чем отличается первый вариант замены тега вместе с содержимым от замены только тега в javascript

Во внутрь функции замены вставляем innerHTML – все! Больше никаких изменений!

Берем предыдущий код, и вовнутрь помещаем код :

"+show_fone_1.innerHTML+"

Обновлённый код

Тег "red" уберем... а то, этот тег остается...

<button id="show_fone_1">НАЖМИ НА МЕНЯ</button>
<script> var show_fone_1 = document.querySelector("#show_fone_1"); show_fone_1.onclick = function() { show_fone_1.outerHTML = "<green>"+show_fone_1.innerHTML+"</green>" }</script>

Результат: Не забудь !
Оставить комментарийCOMMENTS+
Сообщений пока нет - Вы можете стать первым
BBcode
нажмите, чтобы загрузить аватар
Загрузить свой аватар(max ширина, высота = 100px) ( как это работает)

Закрыть
+ =
Подписаться
Теги:
Как заменить тег javascript

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