在現有INPUT標簽周圍進行WRAP跨標簽

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標簽來包裝現有標簽。 它僅在之前或之后附加。 我如何像這樣放置標簽：<span class =“ green”> [現有代碼] </ 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標簽嗎？