Javascript 选择要替换内容的文本节点

我有一个

元素，用来建立一堆复选框。看起来是这样的：

<template id="checky-tmpl">
  <label>
    <input type=checkbox value='value-goes-here'>label-goes-here
  <label>
</template>

for (var i = 0; i < types.val.length; i++) {
  var tmpl = document.getElementById('checky-tmpl').content.cloneNode(true);
  tmpl.querySelector('input').value = types.val[i];
  // how do I target the 'label-goes-here' text node to set it to types.lab[i] ?
  document.getElementById('types-list').appendChild(tmpl);
}

标签在这里

我的部分香草js如下所示：

<template id="checky-tmpl">
  <label>
    <input type=checkbox value='value-goes-here'>label-goes-here
  <label>
</template>

for (var i = 0; i < types.val.length; i++) {
  var tmpl = document.getElementById('checky-tmpl').content.cloneNode(true);
  tmpl.querySelector('input').value = types.val[i];
  // how do I target the 'label-goes-here' text node to set it to types.lab[i] ?
  document.getElementById('types-list').appendChild(tmpl);
}

for（var i=0；i

如何将“label goes here”文本节点设置为types.lab[I]

我知道这些不起作用：

• tmpl.querySelector（'input'）.innerText=types.lab[i]
  
  //错误（
  没有
  innerText
  属性

• tmpl.querySelector（'label'）。innerText=types.lab[i]；

  
  //将替换
  的全部内容，而不仅仅是文本

我可以插入一个

元素来保持

标签在这里

文本，但这是次优的（没有戏剧性，但代码美学让我暂停）

我可以使用

tmpl.appendChild（document.createTextNode（types.lab[I]）

将文本粘贴到节点的末尾，但是我必须从模板中删除

标签，这里是

文本（没有戏剧性，但我喜欢模板是自文档化的）

所以…我希望保持

整洁，并以文本节点为目标，用最少的恶作剧替换它

---

如何操作？

尝试迭代

子节点

并检查

节点。TEXT\u节点

[].slice.call(tmpl.querySelector('label').childNodes).forEach( function( element ){
   if ( element.nodeType == Node.TEXT_NODE ) //check for text node here
   {
      console.log( element.nodeValue ); //this shows the value of text node 
      element.nodeValue = ""; //new value assignment 
   }
});

演示

var tmpl=document.getElementById（'checky-tmpl'）.content.cloneNode（true）；
[].slice.call（tmpl.querySelector（'label'）.childNodes）.forEach（函数（元素）{
if（element.nodeType==Node.TEXT\u Node&&element.nodeValue.trim（）.length>0）//检查此处的文本节点
{
//console.log（element.nodeValue）；//显示文本节点的值
element.nodeValue=“新值”；//新值赋值
}
});
document.getElementById（'types-list'）.appendChild（tmpl）；

标签在这里

尝试迭代

子节点

并检查

节点。TEXT\u节点

[].slice.call(tmpl.querySelector('label').childNodes).forEach( function( element ){
   if ( element.nodeType == Node.TEXT_NODE ) //check for text node here
   {
      console.log( element.nodeValue ); //this shows the value of text node 
      element.nodeValue = ""; //new value assignment 
   }
});

演示

var tmpl=document.getElementById（'checky-tmpl'）.content.cloneNode（true）；
[].slice.call（tmpl.querySelector（'label'）.childNodes）.forEach（函数（元素）{
if（element.nodeType==Node.TEXT\u Node&&element.nodeValue.trim（）.length>0）//检查此处的文本节点
{
//console.log（element.nodeValue）；//显示文本节点的值
element.nodeValue=“新值”；//新值赋值
}
});
document.getElementById（'types-list'）.appendChild（tmpl）；

标签在这里

您可以使用

input

元素的属性来定位紧跟其后的TEXT\u节点元素，然后设置其属性

var tmpl=document.getElementById（'checky-tmpl'）.content.cloneNode（true）；
tmpl.querySelector（'input'）.value=“yahoooo”；
//下一步
tmpl.querySelector（'input'）.nextSibling.nodeValue=“yahoooooo”
document.getElementById（'types-list'）.appendChild（tmpl）；

标签在这里

您可以使用

input

元素的属性来定位紧跟其后的TEXT\u节点元素，然后设置其属性

var tmpl=document.getElementById（'checky-tmpl'）.content.cloneNode（true）；
tmpl.querySelector（'input'）.value=“yahoooo”；
//下一步
tmpl.querySelector（'input'）.nextSibling.nodeValue=“yahoooooo”
document.getElementById（'types-list'）.appendChild（tmpl）；

标签在这里

首选普通js解决方案，无jquery添加一个span来包装文本在美学上没有什么错误添加一个span，其存在的唯一目的是在创建过程中成为目标，因此永不重复？错误；-）否。。不是“错”。它比目标文本节点更简洁我同意@charlietfl它将更简洁简单js解决方案首选，没有jquery添加一个span来包装文本在美学上没有什么错误添加一个span其唯一目的是在创建过程中成为目标，从此不再？错；-）不不是“错”。这比针对文本节点更干净我同意@charlietfl这将是更干净的方法