Question

我有一个<template>元素，用于构建一堆复选框。它看起来像这样：

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

我的部分香草js看起来像这样：

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

如何定位＆＃39;标签 - 在这里＆＃39;文本节点将其设置为types.lab [i]？

我知道这些不起作用：

tmpl.querySelector('input').innerText = types.lab[i];
//错误（<input>没有innerText属性
tmpl.querySelector('label').innerText = types.lab[i];
// <label>的全部内容被替换，而不仅仅是文本

我可以插入一个<span></span>元素来保存label-goes-here文字，但这不是最佳的（没有戏剧性，但代码美学让我暂停）。

我可以使用tmpl.appendChild(document.createTextNode(types.lab[i]))将文字粘贴在节点的末尾，但我必须从模板中删除label-goes-here文字（没有戏剧，但我喜欢拥有我的模板是自我记录的）

所以...我希望<template>保持整洁，并且定位那里的文本节点，并用最少量的恶作剧替换它。

如何？

Answer 1

您可以使用input元素的nextSibling属性来定位紧随其后的TEXT_NODE元素，然后设置其nodeValue属性

var tmpl = document.getElementById('checky-tmpl').content.cloneNode(true);
tmpl.querySelector('input').value = "Yahooooooooo";

//nextSibling
tmpl.querySelector('input').nextSibling.nodeValue = "Yahooooooooo"

document.getElementById('types-list').appendChild(tmpl);

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

Answer 2

尝试重复childNodes并检查Node.TEXT_NODE

[].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 
   }
});

<强>演示

＆＃13;

var tmpl = document.getElementById('checky-tmpl').content.cloneNode(true);
[].slice.call(tmpl.querySelector('label').childNodes).forEach(function(element) {
  if (element.nodeType == Node.TEXT_NODE && element.nodeValue.trim().length > 0) //check for text node here
  {
    //console.log(element.nodeValue); //this shows the value of text node 
    element.nodeValue = "New Value"; //new value assignment 
  }
});
document.getElementById('types-list').appendChild(tmpl);

＆＃13;

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

＆＃13;

选择文本节点以替换内容

2 个答案: