Как заменить тег в js примеры
Что такое заменить тег js, как происходит замена тега в js все способы замены тега в html/ И на все приведенные описания замены тега будут живые примеры!
Всё о замене тега в javascript
- Что такое заменить тег js процесс замены тега
- Замена тега по названию
тега без содержимого - Замена тега по
id тега с сохранением содержимого - Как заменить тег по его
классу !? - Как заменить тег по его
name !? - Вывести переменную js вместо тега
- Заменить содержимое у всех тегов на странице js
Что такое заменить тег js процесс замены тега
Заменить тег в js очень просто! Потому, что в javascript есть замечательная функция [outerHTML], которая которая может работать во всем тегом целиком! И еще нам понадобится функция innerHTML, чтобы работать с содержимым тега! Если оно нам нужно!
Схематично процесс замены тега вместе с содержимым
Схематично процесс замены тега вместе с сохранением содержимого
И в обоих этих случаях нам потребуется скрипт, который обработает соответствующие наши хотелки! Дальше, только примеры!
Замена тега по названию тега без содержимого
<script>
button_id.onclick = function()
{
document.querySelector("redblock") . outerHTML = "<blackblock>Это любой другой тег...black</blackblock>";
}
</script>
Результат замены тега вместе с содержимым:
Для того, чтобы заменить тег, нажмите по кнопке!
Замена тега по названию тега с сохранением содержимого
Поскольку уже уникальный тег использовался, поэтому сделаем все манипуляции через уникальный id? мы можем воспользоваться функцией getElementById, но уникальный id - позволяет обращаться с обьекту без этой функции
<script>
button_id_1 .onclick = function()
{
no1 . outerHTML = "<blackblock>"+no1.innerHTML+"</blackblock>";
}
</script>
Результат замены тага без смены содержимого
Чтобы увидеть результат замены тага в реальном времени нажми на кнопку Замени тегКак заменить тег по его классу !?
Абсолютно тоже самое только с использованием класса в качестве обращения к тегу!
Если класс повторяющийся см.далее...
<script>
document.getElementsByClassName("class_2")[0]. outerHTML = "<blackblock>"+document.getElementsByClassName("class_2")[0].innerHTML+"</blackblock>";
}
</script>
Результат замены тега по его классу:
Чтобы заменить только тег по его классу, нажмите на кнопкуЗдесь в скрипте, вы должны были обратить внимание на квадратные скобки с числом внутри! getElementsByClassName - получает HTMLCollection, похожую на массив, поэтому если стоит 0, то это первый класс по счету с начла страницы!
Как заменить тег по его name !?
У нас стоит задачка обратиться по его "name" Нам понадобится getElementsByName
<style>
blackblock {
background: black;
color: #fbff00;
font-size: 25px;
text-align: center;
display: block;
padding: 20px 0;
margin: 10px 0;
}
</style>
<script>
button_id_3.onclick = function()
{
document.getElementsByName("textarea_3")[0]. outerHTML = "<blackblock>"+document.getElementsByName("textarea_3")[0].innerHTML+"</blackblock>";
}
</script>
<textarea name="textarea_3" class="width_100pro">Здесь текст в блоке с классом name="textarea_3"</textarea>
<button id="button_id_3">Замени тег в блоке с уникальным классом</button>
Результат замены тега по его name с помощью функции getElementsByName
Вывести переменную js вместо тега
Самое первое, что в данном случае нужно знать, как вы сможете обратиться к тегу.
Для того, чтобы вывести переменную вместо тега , давайте потренируемся на примере, с использованием querySelector :
И нам понадобится :
<script>
var peremen = "<red>Здесь любое содержание в переменной.<red>";
button_id_4.onclick = function()
{
document.querySelector("#textarea_4") . outerHTML =peremen;
}
</script>
<textarea id="textarea_4" class="width_100pro">Здесь содержимое textarea</textarea>
<button id="button_id_4">Замени тег на переменную</button>
Нам остается протестировать работу скрипта, который заменит тег на содержимое переменной:
Если у вас в теге есть id? то можно обратиться напрямую через имя этого идентификатора:
возьмем выше идущий javascript и найдем строку :
document.querySelector("#textarea_4") . outerHTML =peremen;
Заменим на:
textarea_4. outerHTML =peremen;
Результат :
Заменить содержимое у всех тегов на странице js
Тут у меня возникла необходимость заменить все содержимое у повторяющихся тегов! Теги могут быть разные, о тег - ах я рассказывал.
И такая задача : "замена содержимого всех тегов" не часто встречается и поэтому, она еще интереснее!Нам нужно создать несколько одинаковых тегов, ну пусть это будет тег :
Чтобы заменить во всех этих тегах содержимое напишем малюсенький скриптик...:
var links = document.querySelectorAll("mark");
links.forEach(link => {
link.innerHTML ="Новое содержимое";
});
И чтобы вы смогли процесс увидеть, давайте сделаем onclick на button
<button onclick="change_text();">Нажми на меня</button>
Обернем наш код в функцию, которая в онклике.
<script>
function change_text(){
var links = document.querySelectorAll("mark");
links.forEach(link => {
link.innerHTML ="Новое содержимое";
});
}
</script>
Далее напишем несколько строк и произвольно напишем какой-то текст с включениями в него, данного тега mark, мы кстати как-то рассказывали о нем здесь!Проверка функции замены содержимого всех тегов:
Вам остается протестировать наш код, о котором написали выше!
Классно получилось! 
смайлы