WRAP span-tag围绕现有的INPUT标签

Question

我有一个包含大约50个Radiobutton组的清单。每组有3个按钮，其值为：是否N / A. 这些组是使用我无法控制的表单工具创建的。我需要在表单中的每个组中将-tag添加到所有单选按钮中的值为“是”的单选按钮。仅使用vanilla javascript。我试图创建一个可以对所有radiobutton组进行排序的javascript。我试图将这个发现附加到一个数组，我可以用它来循环进行前置操作。请注意，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标签环绕现有标签。它只在之前或之后附加。如何将标记放置如下：<span class =“green”> [现有代码] </ span>我是否复制现有标签，删除它然后在新跨度之间重新插入？还是有另一种方式？

Answer 1

花了一段时间，但我终于找到了解决方案。

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');

谢谢您的意见