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

html里写动态js

在HTML中嵌入动态JS可通过` 标签直接编写或引用外部文件，利用DOM API（如document.getElementById ）操作元素，结合事件监听（addEventListener`）响应用户交互，实现内容动态渲染、样式变更或数据实时更新

在HTML中嵌入动态JavaScript

基础结构与脚本引入

方式 说明 示例代码
内联脚本 直接在<script>标签中编写JS代码 html <script> alert("欢迎访问！"); </script>
外部脚本 通过<script src="路径">引入外部JS文件 html <script src="main.js"></script>
位置影响 <head>中的脚本会先执行，可能找不到未加载的DOM元素；<body>末尾的脚本可确保DOM加载完成 html <body> <!-内容加载完成后执行 --> <script> document.getElementById("box").style.color = "red"; </script> </body>

动态操作DOM元素

| 操作类型 | 方法 | 示例 | 效果 |
|————–|———-|———-|———-|| element.innerHTML | js document.getElementById("title").innerHTML = "新标题"; | 更改指定元素的文本内容 |
| 修改样式 | element.style.property | js document.querySelector(".box").style.backgroundColor = "blue"; | 动态调整元素样式属性 |
| 创建节点 | document.createElement() | js const newDiv = document.createElement("div"); newDiv.textContent = "新增内容"; document.body.appendChild(newDiv); | 向页面追加新元素 |

html里写动态js 第1张

事件绑定与交互

事件类型 绑定方式 代码示例 触发场景
点击事件 element.addEventListener("click", function) js document.getElementById("btn").addEventListener("click", function(){ alert("按钮被点击！"); }); 用户点击按钮时触发
输入事件 element.addEventListener("input", function) js const input = document.querySelector("input"); input.addEventListener("input", function(){ console.log("当前输入值：" + this.value); }); 用户在输入框输入时触发
页面加载 window.addEventListener("load", function) js window.addEventListener("load", function(){ document.getElementById("loader").style.display = "none"; }); 整个页面及资源加载完成后触发

加载（AJAX）

技术 核心方法 示例代码 作用
Fetch API fetch(url).then(response => response.json()) js fetch("data.json").then(res => res.json()).then(data => { document.getElementById("list").innerHTML = data.items.map(item => `<li>${item}</li>`).join(""); }); 异步获取JSON数据并渲染到页面
动态更新 element.innerHTML += content js function addItem(){ const ul = document.getElementById("list"); const li = document.createElement("li"); li.textContent = "新条目"; ul.appendChild(li); } 实时向列表添加新条目

相关问题与解答

问题1：JavaScript代码不生效怎么办？

解答：

  1. 检查<script>标签位置，确保代码执行时DOM元素已加载（建议放在<body>末尾）。
  2. 查看浏览器控制台（F12）是否有报错信息。
  3. 确认选择器正确（如id前需加，类名前加）。
  4. 避免直接在标签内联事件（如onclick=""），优先使用addEventListener绑定事件。

问题2：如何优化页面中的动态脚本性能？

解答：

  1. 减少DOM操作：批量修改（如documentFragment）而非频繁操作。
  2. 事件委托：将事件绑定到父元素而非每个子元素。
    js document.getElementById("list").addEventListener("click", function(e){ if(e.target.tagName === "LI"){ // 处理点击逻辑 } });
  3. 按需加载：使用async或defer属性加载外部脚本。
  4. 缓存结果：将重复查询的DOM元素存储在变量
0

相关文章