Question

我试图用HTML和JS编写一个表单，最后显示完成的表单无法进行确认。

我必须在没有刷新和/或重定向的情况下替换页面内容。

我的代码是：

function F() {
    if(...){
         //Empty fields [...]
     }else{
        var el = document.getElementById("formID"); //Form da sostituire
        el.innerHTML = "NEW CONTENT";
    }
}

问题在于＆＃34;新内容＆＃34;真的很长，把它写成一个字符串非常不舒服。对于这种情况，有没有替代innerHTML的方法？

Answer 1

使用<template>标记。将您想要的内容放在<template>标记中，为其指定一个ID，然后在JavaScript中只需复制表单内的模板内容。

HTML：

<template id="form-template">
  NEW CONTENT
</template>

JavaScript的：

function F() {
    if(...){
         //Empty fields [...]
     }else{
        var el = document.getElementById("formID"); //Form da sostituire
        el.innerHTML = document.getElementById("form-template").innerHTML;
    }
}

请参阅以下代码段中的实时示例：

＆＃13;

document.querySelector("button").addEventListener("click", event => {
  document.getElementById("content").innerHTML = document.getElementById("my-template").innerHTML
})

＆＃13;

<template id="my-template">
  <h1>Hello template!</h1>
</template>
<button type="button">Try it!</button>
<div id="content"></div>

＆＃13;

Answer 2

对于<template>浏览器支持的问题，您可以使用任何元素作为占位符，如下所示：

document.querySelector("button").addEventListener("click", event => {
  document.getElementById("content").innerHTML = document.getElementById("my-template").innerHTML
})

.template{
  display:none;
}

<div id="my-template" class="template">
  <h1>Hello template!</h1>
</div>
<button type="button">Try it!</button>
<div id="content"></div>

或者只是将display:none提供给模板元素:)

替代x.innerHTML用于长文本

2 个答案: