当前位置：首页 > 行业动态 > 正文

html写在script块里

在标签内通过JS动态生成HTML，例如document.write(‘文本

在<script>标签中嵌入HTML内容

基础语法与用途

将HTML代码直接写入<script>标签内，通常用于以下场景：

  • 动态生成内容：通过JavaScript将HTML字符串插入页面。
  • 模板化代码：存储可复用的HTML片段。
  • 避免外部脚本解析：防止浏览器将<script>内的HTML视为JavaScript代码。

语法规则

<script type="text/html">
  <!-HTML代码直接写入 -->
  <div>
    <p>这是嵌入在script中的HTML</p>
  </div>
</script>

关键注意事项

问题 解决方案
浏览器误解析 使用type="text/html"或type="text/plain"声明类型
特殊字符转义 替换<为&lt;，>为&gt;，为&quot;
动态插入冲突 配合JavaScript的innerHTML或insertAdjacentHTML使用

动态插入方法对比

方法 代码示例 适用场景
document.write javascript document.write(document.querySelector('script[type="text/html"]').innerHTML); 简单页面初始化
innerHTML javascript const container = document.getElementById('app'); container.innerHTML = document.querySelector('script[type="text/html"]').innerHTML; 局部更新DOM
创建元素节点 javascript const wrapper = document.createElement('div'); wrapper.innerHTML = myScript.innerHTML; document.body.appendChild(wrapper); 复杂结构渲染

特殊字符处理技巧

当HTML中包含<script>标签时，需进行双重转义：

<script type="text/html">
  &lt;!-转义后的HTML --&gt;
  &lt;div&gt;
    &lt;p&gt;包含嵌套脚本&lt;/p&gt;
    &lt;script&gt;alert("hello")&lt;/script&gt;
  &lt;/div&gt;
</script>

相关问题与解答

Q1：为什么不用常规HTML标签而要写在<script>里？
A1：当需要将HTML作为字符串动态注入时（如通过JavaScript操作），将其包裹在<script>中可避免浏览器提前解析，配合type="text/html"能明确告知浏览器这是模板内容。

Q2：如何处理包含多个<script>标签的HTML片段？
A2：需对所有<script>标签进行转义，例如将<script>转为&lt;script&gt;，更安全的方式是使用DOM操作创建元素，而非直接插入字符串， 

const template = document.querySelector('script[type="text/html"]').innerHTML;
const parser = new DOMParser();
const doc = parser.parseFromString(template, 'text/html');
document.body.append(doc.body.
script
0

相关文章