Вход

Просмотр полной версии : Как обернуть в тег слова?

face2005
25.12.2020, 16:44
Добрый день! есть набор радиокнопок и после инпута стоит текст

<label for="field_omiiy-0">
<input type="radio" name="item_meta[45]" id="field_omiiy-0" value="Для жизни" >
Для жизни
</label>


подскажите как его обернуть в тег span ? не могу стилизовать его при выделеном радио инпуте
рони
25.12.2020, 17:29
face2005,
<!DOCTYPE html>

<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
span{
color: red;
}

</style>
</head>

<body>
<label for="field_omiiy-0">
<input type="radio" name="item_meta[45]" id="field_omiiy-0" value="Для жизни" >
Для жизни
</label>
<script>
let label = document.querySelector('[for="field_omiiy-0"]');
let span = document.createElement('SPAN');
label.childNodes.forEach(el => el.nodeType == 3 && span.append(el));
label.append(span);
</script>

</body>
</html>
face2005
25.12.2020, 17:46
Спасибо большое! но мне бы как-то универсально... таких форм несколько, но структура одинаковая

<div class="frm_opt_container">
<div class="frm_radio">
<label for="field_omiiy-0">
<input type="radio" name="item_meta[45]" id="field_omiiy-0" value="Для жизни" > Для жизни
</label>
</div>
<div class="frm_radio">
<label for="field_omiiy-1">
<input type="radio" name="item_meta[45]" id="field_omiiy-1" value="Как инвестицию" > Как инвестицию
</label>
</div>
</div>
рони
25.12.2020, 18:11
но мне бы как-то универсально...
что мешает добавить цикл по нужным элементам вместо строки 21?
рони
25.12.2020, 18:21
face2005,
:(
<!DOCTYPE html>

<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
span{
color: red;
}

</style>
</head>

<body>
<div class="frm_opt_container">
<div class="frm_radio">
<label for="field_omiiy-0">
<input type="radio" name="item_meta[45]" id="field_omiiy-0" value="Для жизни" > Для жизни
</label>
</div>
<div class="frm_radio">
<label for="field_omiiy-1">
<input type="radio" name="item_meta[45]" id="field_omiiy-1" value="Как инвестицию" > Как инвестицию
</label>
</div>
</div>

<script>
document.querySelectorAll('.frm_opt_container label').forEach(label =>{
let span = document.createElement('SPAN');
label.childNodes.forEach(el => el.nodeType == 3 && span.append(el));
label.append(span);})
</script>

</body>
</html>
face2005
25.12.2020, 18:59
огромное спасибо!