要用JavaScript编写HTML,首先需要创建一个HTML文档结构,然后使用JavaScript操作DOM元素,以下是一个简单的示例,包括一个小标题和一个单元表格:
(图片来源网络,侵删)1、创建一个HTML文档结构:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF8"> <meta name="viewport" content="width=devicewidth, initialscale=1.0"> <title>用JavaScript写HTML示例</title> </head> <body> <div id="container"></div> <script src="script.js"></script> </body> </html>
2、在script.js
文件中编写JavaScript代码:
// 获取容器元素 const container = document.getElementById('container'); // 创建小标题 const h1 = document.createElement('h1'); h1.textContent = '这是一个小标题'; container.appendChild(h1); // 创建表格 const table = document.createElement('table'); table.border = '1'; // 创建表头 const thead = document.createElement('thead'); const headerRow = document.createElement('tr'); const headerCell1 = document.createElement('th'); headerCell1.textContent = '列1'; const headerCell2 = document.createElement('th'); headerCell2.textContent = '列2'; headerRow.appendChild(headerCell1); headerRow.appendChild(headerCell2); thead.appendChild(headerRow); table.appendChild(thead); // 创建表格内容 const tbody = document.createElement('tbody'); for (let i = 0; i < 5; i++) { const row = document.createElement('tr'); const cell1 = document.createElement('td'); cell1.textContent =数据${i + 1}1
; const cell2 = document.createElement('td'); cell2.textContent =数据${i + 1}2
; row.appendChild(cell1); row.appendChild(cell2); tbody.appendChild(row); } table.appendChild(tbody); // 将表格添加到容器中 container.appendChild(table);
这个示例中,我们首先创建了一个HTML文档结构,然后在script.js
文件中编写了JavaScript代码,我们使用document.createElement
方法创建了小标题、表格、表头和表格内容,并将它们添加到了容器元素中。
最新评论
本站CDN与莫名CDN同款、亚太CDN、速度还不错,值得推荐。
感谢推荐我们公司产品、有什么活动会第一时间公布!
我在用这类站群服务器、还可以. 用很多年了。