コンテンツを置き換えるテキストノードを選択

Question

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

：

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

と私のバニラ-JSの一部は次のようになります。ラボ[i]？

私はこれらが動作しません知っている：

• tmpl.querySelector('input').innerText = types.lab[i];
  は//エラー（<input>が<label>の全体の内容が置き換えられますinnerTextプロパティ
• tmpl.querySelector('label').innerText = types.lab[i];
  //を持っていません、本文だけでなく、

<span></span>要素はlabel-goes-hereのテキストを保持するが、それは最適ではない（ドラマはないが、コードの美学は私に一時停止を与える）。

私は、ノードの最後にテキストを固執するtmpl.appendChild(document.createTextNode(types.lab[i]))を使用することができますが、私は、テンプレートからlabel-goes-hereテキストを削除する必要があると思います（ノードラマが、私は自己文書化されて、私のテンプレートのようなもの）

だから... <template>はそのままで、きちんと整理しておきたいですし、そこにあるテキストノードを対象にして、最小限の嫌悪感で置き換えてください。

どのようにですか？

Answer 1

をチェックしてくださいmmediately次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あなたは私をターゲットにinput要素のnextSiblingプロパティを使用することができます

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

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