**createElement()** **重点**
时间: 2023-10-05 13:10:58 浏览: 38
createElement() 是一个在 JavaScript 中常用的方法,用于创建一个新的 HTML 元素节点。它可以在 DOM 中动态生成新的元素,并将其插入到指定的位置。
该方法可以通过 document 对象调用,语法如下:
```javascript
document.createElement(tagName)
```
其中,tagName 是要创建的元素的标签名,例如 'div'、'p'、'span' 等。
使用该方法创建新元素后,可以通过其他 DOM 方法设置其属性、样式、内容等,并将其添加到页面中的特定位置。例如:
```javascript
let newDiv = document.createElement('div');
newDiv.id = 'myDiv';
newDiv.textContent = 'Hello, world!';
document.body.appendChild(newDiv);
```
以上代码将创建一个新的 `<div>` 元素,设置其 id 为 'myDiv',内容为 'Hello, world!',然后将其添加到 body 元素中。
通过 createElement() 方法,我们可以动态地生成 HTML 元素,并与页面进行交互和操作。
相关问题
随机数字消消乐游戏3*3html+JavaScript代码
这是一个使用 HTML 和 JavaScript 编写的基本的 3x3 随机数字消消乐游戏代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>随机数字消消乐游戏</title>
<style>
table {
border-collapse: collapse;
}
td {
width: 50px;
height: 50px;
text-align: center;
vertical-align: middle;
font-size: 24px;
font-weight: bold;
border: 1px solid black;
}
td.selected {
background-color: yellow;
}
td.matched {
background-color: green;
color: white;
}
</style>
</head>
<body>
<h1>随机数字消消乐游戏</h1>
<table id="board">
<!-- 游戏板格子 -->
</table>
<p>
<button id="reset">重新开始</button>
</p>
<script>
// 创建一个 3x3 的游戏板
var board = [[0, 0, 0], [0, 0, 0], [0, 0, 0]];
// 随机填充每个位置
for (var i = 0; i < 3; i++) {
for (var j = 0; j < 3; j++) {
board[i][j] = Math.floor(Math.random() * 9) + 1;
}
}
// 创建游戏板格子并添加到 HTML 页面中
var table = document.getElementById("board");
for (var i = 0; i < 3; i++) {
var row = document.createElement("tr");
for (var j = 0; j < 3; j++) {
var cell = document.createElement("td");
cell.innerText = board[i][j];
cell.addEventListener("click", cellClicked);
row.appendChild(cell);
}
table.appendChild(row);
}
// 当前选中的格子
var selectedCell = null;
// 处理格子的点击事件
function cellClicked(event) {
var cell = event.target;
if (cell.classList.contains("matched")) {
return; // 已经匹配的格子不能再次选择
}
if (selectedCell == null) {
cell.classList.add("selected");
selectedCell = cell;
} else {
var x1 = selectedCell.parentNode.rowIndex;
var y1 = selectedCell.cellIndex;
var x2 = cell.parentNode.rowIndex;
var y2 = cell.cellIndex;
if (Math.abs(x1 - x2) + Math.abs(y1 - y2) != 1) {
alert("您选择的两个位置不相邻,请重新选择!");
} else {
// 交换两个位置的数字
var temp = board[x1][y1];
board[x1][y1] = board[x2][y2];
board[x2][y2] = temp;
selectedCell.innerText = board[x1][y1];
cell.innerText = board[x2][y2];
checkMatches();
}
selectedCell.classList.remove("selected");
selectedCell = null;
}
}
// 检查是否存在相同的三个数字
function checkMatches() {
var foundMatch = false;
for (var i = 0; i < 3; i++) {
if (board[i][0] == board[i][1] && board[i][1] == board[i][2]) {
foundMatch = true;
markMatched(i, 0, i, 1, i, 2);
}
if (board[0][i] == board[1][i] && board[1][i] == board[2][i]) {
foundMatch = true;
markMatched(0, i, 1, i, 2, i);
}
}
if (foundMatch) {
alert("恭喜你,游戏结束!");
document.getElementById("reset").disabled = false;
}
}
// 标记匹配的格子
function markMatched(x1, y1, x2, y2, x3, y3) {
var cells = [
table.rows[x1].cells[y1],
table.rows[x2].cells[y2],
table.rows[x3].cells[y3]
];
for (var i = 0; i < 3; i++) {
cells[i].classList.add("matched");
}
}
// 按钮的点击事件
document.getElementById("reset").addEventListener("click", function() {
window.location.reload();
});
</script>
</body>
</html>
```
这个游戏会随机生成一个 3x3 的游戏板,每个位置填充一个 1~9 的数字。用户可以选择两个相邻的位置交换,如果交换后存在三个相同的数字排成一行或一列,则游戏结束。游戏结束后,用户可以点击重新开始按钮重新开始游戏。
html使用循环生产9*9的复选框
以下是使用HTML和JavaScript循环生成9*9的复选框的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>9x9 Checkbox Table</title>
<script>
function createTable() {
var table = document.getElementById("checkboxTable");
for (var i = 1; i <= 9; i++) {
var row = table.insertRow();
for (var j = 1; j <= 9; j++) {
var cell = row.insertCell();
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.id = "checkbox_" + i + "_" + j;
cell.appendChild(checkbox);
}
}
}
</script>
</head>
<body onload="createTable()">
<table id="checkboxTable"></table>
</body>
</html>
```
在这个示例中,我们使用JavaScript的for循环嵌套来生成一个9x9的表格。对于每个单元格,我们都创建一个新的复选框元素,并将其添加到单元格中。复选框的ID是通过行和列的索引创建的,例如“checkbox_5_3”表示第5行第3列的复选框。
该示例在页面加载时自动调用createTable()函数,该函数将表格插入到页面中,并使用循环创建复选框。可以根据需要修改该函数以生成不同大小的表格或使用不同类型的表格元素。
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)