Javascript 使用html<；模板>；：innerHTML.replace

上面说我可以很容易地在我的文档中克隆html模板

<template id="mytemplate">
  <img src="" alt="great image">
  <div class="comment"></div>
</template>

这不是很完美吗？querySelector用于获取元素，以便您可以更新其属性。我只是不明白他为什么要在克隆模板之前更新它。但这不是我的问题。真正的问题是，在我的例子中，要更新的变量的位置是未知的。它可以是任何模板结构中的属性或innerText。我相信这是模板最普遍和最频繁的使用。因此，我可以确保变量id在模板中是唯一的，如

应该更新

#回复

，但作者没有解释如何更新。我成功地在原始模板

document.querySelector（'#mytemplate'）.innerHTML.replace（id，value）

上使用了innerHTML，但这会破坏模板以供以后使用，如上所述。我无法更新克隆文本。这可能是因为template.clone生成了一个文档片段，其中没有innerHTML。但是，在提出这一点之前，我决定研究替代方案，因为我知道innerHTML/outerHTML并不十分标准

检查innerHTML的替代方案，但同样，它们对模板的假设太多。它们不只是用用户值替换某些特定的标识符，而是完全重新创建模板，这打破了模板的整个概念。一旦您在变量赋值中重新创建其整个代码，模板就失去了任何意义。那么，

应该如何使用呢？

再次使用

.querySelectorAll

来选择元素，并

设置属性

来更改

href

值

 var a = <template>.querySelectorAll("a[href='#reply']");
 a[0].setAttribute("href", <url>)

var a=.querySelectorAll（“a[href='#reply']）；
a[0].setAttribute（“href”，）

这是一个更通用的函数。它会更改克隆模板中选定元素的属性，当然这是非常基本的

    //object = the cloned template.
    //selector = the selector argument which selects all nodes.
    //attribute = the attribute to change.
    //value = the value that needs to be set to the attribute.

function changeTemplateValues(object, selector, attribute, value)
{
    elements = object.querySelectorAll(selector);
    if (elements.length == 0)
    {
        return false; //stop executing. No elements were found.
    }
    else if (!attribute && !value)
    {
        return elements; //no attributes and values are set, return nodelist;
    }
    else
    {
        if (attribute)
        {
            //loop over all selected elements to change them.
            for (var i = 0; i < elements.length; ++i)
            {
                if (attribute.match(/innerHTML|textContent|text|nodeValue/g) )
                {
                    elements[i][attribute] = value;
                }
                else
                {
                    elements[i].setAttribute(attribute, value);
                }
            }
        }
        else
        {
            //No attribute return false;
            return false;
        }
    }
}

//对象=克隆的模板。
//选择器=选择所有节点的选择器参数。
//属性=要更改的属性。
//value=需要设置为属性的值。
函数changeTemplateValues（对象、选择器、属性、值）
{
elements=object.querySelectorAll（选择器）；
if（elements.length==0）
{
return false；//停止执行。未找到任何元素。
}
else如果（！attribute&&！value）
{
返回元素；//未设置属性和值，返回节点列表；
}
其他的
{
if（属性）
{
//循环所有选定元素以更改它们。
对于（变量i=0；i
这是我的解决方案，
评估功能

  <div id="div1">env: </div>
  <template id="template1">
        <a href="#ref">var1=var2</a>
  </template>

<script language="javascript">
    function valuate(template, targetParent, dict) {
        var t = document.querySelector('#' + template);
        var clone = t.cloneNode(true)
        for (key in dict) {
            clone.innerHTML = clone.innerHTML.replace(key, dict[key])
        }
        var fragment = document.importNode(clone.content, true)
        var canvas = document.querySelector('#' + targetParent);
        canvas.appendChild(fragment);
        //alert(canvas.innerHTML)
    }
    valuate("template1", "div1", {var1:"1+1", var2:2, "#ref":"abc.net"})
</script>

env:
功能评估（模板、targetParent、dict）{
var t=document.querySelector（“#”+模板）；
var clone=t.cloneNode（真）
for（输入dict）{
clone.innerHTML=clone.innerHTML.replace（key，dict[key]）
}
var fragment=document.importNode（clone.content，true）
var canvas=document.querySelector（“#”+targetParent）；
canvas.appendChild（片段）；
//警报（canvas.innerHTML）
}
赋值（“template1”，“div1”，“var1:“1+1”，var2:2”，“#ref:“abc.net”}）

它接受模板、字典和目标元素。不幸的是。您不知道为什么吗？
但我为什么要更新[0]属性？我的意思是，假设第一个是模板，一旦您更新了属性
\replay->value
，它就不再是
\replay
。这会破坏模板供以后使用，不是吗？此外，这种方法不适用于innerText变量，对吗？您是正确的。您需要对新克隆的模板调用querySelectorAll。因此，在示例代码中选择clone.querySelectorAll
。这样，只有克隆版本才会得到更新。对于
innerText
，只需将
setAttribute
替换为
innerText=string
。Firefox不支持innerText！
    //object = the cloned template.
    //selector = the selector argument which selects all nodes.
    //attribute = the attribute to change.
    //value = the value that needs to be set to the attribute.

function changeTemplateValues(object, selector, attribute, value)
{
    elements = object.querySelectorAll(selector);
    if (elements.length == 0)
    {
        return false; //stop executing. No elements were found.
    }
    else if (!attribute && !value)
    {
        return elements; //no attributes and values are set, return nodelist;
    }
    else
    {
        if (attribute)
        {
            //loop over all selected elements to change them.
            for (var i = 0; i < elements.length; ++i)
            {
                if (attribute.match(/innerHTML|textContent|text|nodeValue/g) )
                {
                    elements[i][attribute] = value;
                }
                else
                {
                    elements[i].setAttribute(attribute, value);
                }
            }
        }
        else
        {
            //No attribute return false;
            return false;
        }
    }
}

  <div id="div1">env: </div>
  <template id="template1">
        <a href="#ref">var1=var2</a>
  </template>

<script language="javascript">
    function valuate(template, targetParent, dict) {
        var t = document.querySelector('#' + template);
        var clone = t.cloneNode(true)
        for (key in dict) {
            clone.innerHTML = clone.innerHTML.replace(key, dict[key])
        }
        var fragment = document.importNode(clone.content, true)
        var canvas = document.querySelector('#' + targetParent);
        canvas.appendChild(fragment);
        //alert(canvas.innerHTML)
    }
    valuate("template1", "div1", {var1:"1+1", var2:2, "#ref":"abc.net"})
</script>