Question

我有一个清单，其中包含约50个单选按钮组。每个组都有3个按钮，其值分别为：是否N / A。这些组是使用我无法控制的表单工具创建的。

我需要在表单的每个组中的所有单选按钮前添加一个-tag，其值为“ Yes”。仅使用香草javascript。

我试图创建一个可以对所有单选按钮组进行排序的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标签来包装现有标签。它仅在之前或之后附加。我该如何放置这样的标签： [现有代码]

我是否复制现有标签，将其删除，然后在新跨度之间重新插入？还是还有其他方法？

Answer 1

您可以通过这种方式替换父div的内部HTML

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()

Answer 2

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

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

谢谢您的输入

Answer 3

您不能存储innerHTML，然后编写span open标签+ html + span close标签吗？

在现有INPUT标签周围

3 个答案: