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

如何用js写html

要用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方法创建了小标题、表格、表头和表格内容，并将它们添加到了容器元素中。

本站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本站，有问题联系侵删！
本文链接：http://www.xixizhuji.com/fuzhu/309992.html
0

相关文章

随机文章