WRAP span-tag вокруг существующего INPUT-тега - PullRequest
Новая
       12

WRAP span-tag вокруг существующего INPUT-тега

0 голосов
/ 16 мая 2019

У меня есть контрольный список, который содержит около 50 групп Radiobutton. Каждая группа имеет 3 кнопки со значениями: Да Нет Н / Д. Эти группы создаются с использованием инструмента формы, который я не могу контролировать.

Мне нужно добавить -tag ко всем переключателям со значением «Да» в КАЖДОЙ отдельной группе в форме. Использование только ванильного JavaScript.

Я попытался создать javascript, который может сортировать все группы радиокнопок. И я попытался добавить результат к массиву, который я могу использовать для цикла для действия prepend.

Обратите внимание, что для меня сгенерированы ID и NAME, поэтому я не могу заранее знать, что такое имена групп. 

console.log('start')
//var span = document.getElementById("span_id");
var inputs = document.getElementsByTagName("input");
 console.log('a:',inputs)
for (var i = 0; i < inputs.length; ++i) {
    if (inputs[i].defaultValue == 'yes') {
       var idd = inputs[i].id

      var parent = document.getElementById(idd).parentNode;
            var p = document.createElement("p");
            var span = document.createElement("span");
            //parent.append(p);
            parent.prepend(span);
    }
}
}

getCheckedValue()

У меня есть скрипка с самым обновленным кодом: https://jsfiddle.net/y4vLbtmw/54/

проблема в том, что я не могу заставить тег SPAN обернуть существующий тег. Добавляется только до или после. Как поместить тег следующим образом: [существующий код]

Копировать ли существующий тег, удалить его, а затем снова вставить его между новым промежутком? или есть другой способ?

Ответы [ 3 ]

1 голос
/ 16 мая 2019

Вы можете заменить Внутренний HTML родительского div таким образом

parent.innerHTML = "<span> " + parentHTML + "</span>";

function getCheckedValue() {
console.log('start')
//var span = document.getElementById("span_id");
var inputs = document.getElementsByTagName("input");
 console.log('a:',inputs)
for (var i = 0; i < inputs.length; ++i) {
    if (inputs[i].defaultValue == 'yes') {
       var idd = inputs[i].id

      var parent = document.getElementById(idd).parentNode();
      parentHTML = parent.innerHTML;
      parent.innerHTML = "<span> " + parentHTML + "</span>";
            //var p = document.createElement("p");
            //var span = document.createElement("span");
            //parent.append(p);
            //parent.prepend(span);
    }
}
}

getCheckedValue()
1 голос
/ 16 мая 2019

Прошло некоторое время, но я наконец нашел решение. 

function getCheckedValue(newColor,newValue) {

//var span = document.getElementById("span_id");
var inputs = document.getElementsByTagName("input");

for (var i = 0; i < inputs.length; ++i) {
    if (newValue.localeCompare(inputs[i].value) == 0) {

       var idd = inputs[i].id
   console.log('value:',newValue,inputs[i].value,idd)
      elementToWrap = document.getElementById(idd);
            divWrapper = document.createElement("span");
      divWrapper.setAttribute("class", newColor);

      wrap_single(elementToWrap, divWrapper);
    }
}
}

function wrap_single(el, wrapper) {
    el.parentNode.insertBefore(wrapper, el);
    wrapper.appendChild(el);
}
let divWrapper;
let elementToWrap;

//Run 

getCheckedValue('green','yes');
getCheckedValue('red','no');
getCheckedValue('yellow','n/a');

Спасибо за ваш вклад

0 голосов
/ 16 мая 2019

Не можете ли вы сохранить innerHTML, а затем написать тег открытия диапазона + тег HTML + закрытия раздела?

...