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

Posted 2023-02-16

【中文标题】围绕现有的 INPUT-tag WRAP span-tag

【英文标题】：WRAP span-tag around existing INPUT-tag

【发布时间】：2019-05-16 14:54:19

【问题描述】：

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

我需要在表单的每个组中为所有单选按钮添加一个 -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 标记环绕现有标记。它只附加在之前或之后。我怎么把标签像这样： [existing code] span >

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

【参考方案1】：

你可以这样替换父div的Inner 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()

【参考方案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');

感谢您的意见

【参考方案3】：

不能存储innerHTML，然后写span open tag + html + span close tag吗？