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

html用js输出

“`html，，，JS输出示例，， ， ， document.getElementById(‘output’).textContent = ‘这是一段由JavaScript生成的65字简答，用于演示前端基础功能实现。’;， ，

HTML与JavaScript输出基础

通过JavaScript向HTML页面输出内容的核心方法是操作DOM元素,常见方式包括：

  • 修改元素文本内容（textContent/innerText）
  • 修改元素HTML内容（innerHTML）
  • 创建新元素并插入文档
  • 修改元素样式属性

基础示例：输出文本

<!DOCTYPE html>
<html>
<body>
  <div id="output"></div>
  <script>
    // 方法1：直接设置textContent
    document.getElementById('output').textContent = 'Hello World'; 
// 方法2：使用innerHTML插入HTML
document.getElementById('output').innerHTML = '&lt;strong&gt;Hello HTML&lt;/strong&gt;';
// 方法3：创建新元素并追加
const newElement = document.createElement('p');
newElement.textContent = 'New paragraph';
document.body.appendChild(newElement);
</script>
</body>
</html>
动态表格生成

 
  
 序号 姓名 年龄 
     
const data = [
  {name: '张三', age: 25},
  {name: '李四', age: 30},
  {name: '王五', age: 28}
]; 
const tableBody = document.getElementById('data-table');data.forEach((item, index) => {const row = tableBody.insertRow();row.insertCell().textContent = index + 1;row.insertCell().textContent = item.name;row.insertCell().textContent = item.age;});
html用js输出  第1张
事件驱动输出
 
document.getElementById('show-btn').addEventListener('click', () => {
  const now = new Date();
  document.getElementById('clock').textContent = now.toLocaleString();
}); 
常见问题与解答
 
 HTML 
 
 
   赞 (0) 
 
 
 
 
 未希 
 
 
   0 
  
   
 
 
 
 
 
 转让个人域名时如何避免踩坑？ 
   上一篇 2025-04-29 15:14 
 
 
 阿迪CDN如何成为网站流量加速的秘密武器？ 
 下一篇   2025-04-29 15:18 
 
 
 
 
 
发表回复  
 
 
您的电子邮箱地址不会被公开。必填项已用 * 标注
 
  
   
 
 
   
  
   
  
    
 
 
  
 
 
  
  
 
Copyright © 2020 KDUN.COM 版权所有 滇ICP备2020007656号-2
 
《中华人民共和国增值电信业务经营许可证》编号：滇B1-20203971B2-20210026SiteMap
 
 
 
 
  
 
 
 
 
 
  产品购买  QQ咨询  微信咨询   SEO优化 
   分享本页 
 
   返回顶部 
 
 
 
  首页 
 
  专题 
 
  投稿 
 
  限时活动 
 
 
 
 
 云产品限时瞬秒。精选云产品高防服务器，20M大带宽限量抢购  > > 点击进入 
   
 
 
  
 问题 解答 
 
 如何修改已存在元素的内容？ 使用element.textContent修改文本，或element.innerHTML修改HTML内容。
document.getElementById('myDiv').textContent = '新内容';
 
 
 怎样批量创建多个相同元素？ 使用循环结合createElement()和appendChild()，例如创建5个段落：
for(let i=0; i<5; i++){
  const p = document.createElement('p');
  p.textContent = '这是第' + (i+1) + '个段落';
  document.body.appendChild(p);
}
HTML
0

相关文章