Question

我正在尝试向单选按钮添加标签和跨度标签以对其进行样式设置。我希望将输入和跨度标签包裹在标签标签内。

注意：我正在对现有模板进行设计更改。该应用程序使用XSLT刷新已安装模板中的构建。我试图在XSLT结构中添加标签和span标签，但导致最终版本崩溃。让我添加这些标签的唯一一件事就是在运行时插入它们。

function radio_button() {
var iframe = document.getElementById('questionFrame');
var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;

var inputs = innerDoc.getElementsByTagName("input");

for(var i = 0; i < inputs.length; i++) { 
if (inputs[i].type=='radio' ) { 
var radio=inputs[i];
radio.insertAdjacentHTML('beforebegin', '<label>');
radio.insertAdjacentHTML('afterend', '<span></span></label>');
   }
  } 
}

我的预期结果是使它变成这样，

<label><input type="Radio" name="answer" value="x9" /><span><span></label>

但是我得到了这个，

<label></label><input type="Radio" name="answer" value="x9" /><span><span>

是否可以将输入标签包装在标签标签内？非常感谢。感谢任何建议。

Answer 1

您可以尝试cloneNode()创建所需的代码段，然后将replaceChild与新创建的元素一起使用

document.querySelectorAll('input[type="radio"]')
    .forEach(function(radio){
        let label = document.createElement('label');
        let span = document.createElement('span');
          label.appendChild(radio.cloneNode());
          label.appendChild(span);
          radio.parentNode.replaceChild(label, radio);
    });
    

let labels = document.querySelectorAll('label');
console.log(labels[0].innerHTML, labels);

<html>
  <body>
    <input type="radio" value="1" name="r8">
    <input type="radio" value="2" name="r8">
    <input type="radio" value="3" name="r8">
    <input type="radio" value="4" name="r8">
  </body>
</html>

是否可以使用insertAdjacentHTML（）插入标签以包装某个元素？

1 个答案: