HTML5中写字符有五种方式：一是直接在语义化标签内写静态字符；二是用jQuery的.text()或.html()动态设置内容；三是内联script中调用jQuery；四是通过data-*属性预存再读取；五是外部JS文件中执行jQuery操作。

一、HTML5中直接写字符的写法

在HTML5文档中，若需在页面上静态显示文本内容，可直接在元素标签内插入纯字符，无需JavaScript干预。该方式适用于内容固定、不依赖用户交互或动态逻辑的场景。

1、在

内使用语义化标签（如

、

、）包裹字符。

2、确保字符位于开始标签与结束标签之间，不被注释或script标签包裹。

3、若字符含特殊符号（如、&），须使用HTML实体编码，例如

应写作<div>。

立即学习“前端免费学习笔记（深入）”；

二、HTML5中用JS包裹并调用jQuery的写法

当需要动态操作DOM节点时，可通过jQuery选择器获取元素并设置其内容。此方式要求页面已加载jQuery库，且脚本执行时机需确保目标元素已存在于DOM中。

1、在HTML文件底部或使用$(document).ready()包裹代码，避免因DOM未就绪导致选择器返回空集。

2、引入jQuery库，例如通过CDN添加<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>。

3、使用$("#id")选取具有对应id属性的元素，并调用.text()或.html()方法写入字符，例如$("#myDiv").text("Hello HTML5");。

三、内联script中直接写字符并调用jQuery的写法

可在HTML文件内部script标签中编写jQuery代码，实现对指定ID元素的内容赋值。该方式适合轻量级动态内容注入，但需注意脚本位置与执行顺序。

1、将<script>标签置于<body>底部，或包裹于$(function(){...})中。</script>

Java 接口排错助手

在调试 Java 后端 API 故障时使用此技能，尤其适用于以下任务：分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转，以及生成简洁的诊断结论与修复方案。

下载

2、确认目标元素存在且id属性值唯一，例如

。

3、在script中调用$("#content").html("动态插入的HTML字符");完成内容写入。

四、使用data-*属性配合jQuery写字符的写法

通过HTML5自定义data属性预存字符内容，再由jQuery读取并写入目标元素，实现结构与行为分离，提升可维护性。

1、在目标容器上添加data属性，例如

。

2、使用jQuery读取该属性值：var txt = $("#target").data("text");。

3、将读取值写入其他元素：$("#output").text(txt);。

五、通过外部JS文件调用jQuery写字符的写法

将jQuery操作逻辑抽离至独立JS文件，有利于代码复用与缓存优化。该方式要求HTML中正确引用外部脚本且保证执行时机合理。

1、创建external.js文件，写入$( "#display" ).text( "外部JS注入内容" );等语句。

2、在HTML中使用<script src="external.js"></script>引入，且置于jQuery库引入之后。

3、确保external.js中所有DOM操作均在$(document).ready()内执行，或使用事件委托机制应对异步加载内容。