温馨提示:本文翻译自stackoverflow.com,查看原文请点击:javascript - How to use .innerHTML in template element

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

发布于 2020-03-29 22:01:02

我正在使用框架大量使用HTML模板的应用程序。一切顺利,直到我遇到这个问题:

Uncaught TypeError: Cannot read property 'querySelector' of null

如果我错了,请纠正我,但是我认为这与使用模板的代码本身有关,而JavaScipt无法读取该模板的内部。

这是我的代码的缩图版本,正在遇到错误。

的HTML

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

的JavaScript

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

错误:

 Uncaught TypeError: Cannot read property 'innerHTML' 
 of null

有什么办法可以避免这个错误?

查看更多

提问者
Ved Tiwari
被浏览
12
O'Niel 2020-02-05 01:08

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/

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

发布
问题

分享
好友

手机
浏览

扫码手机浏览