javascript - 如何在模板元素中使用.innerHTML

1）默认情况下不呈现模板元素的内容

您可以根据需要多次重复使用模板元素中的内容，但是您需要使用Javascript手动指定内容。如果您不使用任何Javascript来呈现模板元素，则它将在DOM中不可见。结果导致您的代码找不到段落（位于模板元素中）。

2）确保在加载DOM之后调用Javascript

网页从上到下加载。如果您没有将Javascript代码放在body标签的底部，或者没有手动说要在DOM准备好之后加载它，那么您的代码会尝试在该元素存在之前找到一个元素。

3）您的代码有一些小错误，例如缺少段落等。

使用良好的编辑器修复该问题。

此示例代码向您展示了如何实现：

Javascript：

function example() {
    document.getElementById("paragraph").innerHTML = "This text has been changed!";
}


function init() {
    //Get the template-element by id
    let mainTemplate = document.getElementById("main");
    //Create a new div-element to hold template content
    let parent = document.createElement("div");

    //IMPORTANT!
    //Cloning template content into HTML DOM so it's visible.
    //This part - content.cloneNode - makes your template content visible after being appended to the body, or another legal element in the DOM.
    parent.append(mainTemplate.content.cloneNode(true));

    //Append to body
    document.body.append(parent);
}   

//After dom is ready: Launch init function
document.onload = init();

HTML：

<template id="main">
     <p id="paragraph">This text needs to be changed in 
     JS</p>
     <button onclick="example()">Click ME!</button>
</template>

工作的JSFiddle：https ://jsfiddle.net/ovc1mrs2/

您可能希望将模板的内容直接附加到主体或其他元素。