JS动态创建html节点

<table> <tr id="tr1"> <td> 1 </td> </tr> </table> <script> var tt = document.getElementById("tr1"); for (var i = 0; i < 10; i++) { var FF = document.createElement("<td></td>"); FF.innerText = 'td'+ i; tt.appendChild(FF); } </script>............... ### JS动态创建HTML节点 #### 知识点一：JavaScript操作DOM 在Web开发中，JavaScript经常被用来操作文档对象模型（Document Object Model，简称DOM）。DOM是一种将文档（如HTML文档）转换为树状结构的标准，使得开发者可以通过编程语言（如JavaScript）来访问和修改文档中的元素。 #### 知识点二：`document.getElementById` `document.getElementById`是获取DOM元素的一种方法，它接收一个参数，即元素的ID，并返回文档中具有指定ID的第一个元素。如果找不到具有该ID的元素，则返回null。例如，代码片段中的`var tt = document.getElementById("tr1");`表示选取ID为"tr1"的`<tr>`元素。 #### 知识点三：`document.createElement` `document.createElement`用于创建新的HTML元素节点。它接收一个参数，即要创建的元素类型名称。创建出的新元素不会自动添加到DOM树中，需要通过其他方法将其插入到DOM树中的某个位置。例如，在代码片段中，`var FF = document.createElement("<td></td>");`创建了一个`<td>`元素。 #### 知识点四：`.appendChild` `.appendChild`方法用于将一个节点添加到指定父节点的子节点列表的末尾。它接收一个参数，即要添加的节点。例如，在代码片段中，`tt.appendChild(FF);`表示将`FF`元素添加到`tt`元素的子节点列表的末尾。 #### 知识点五：`innerHTML`与`innerText` - `innerHTML`属性用于设置或获取元素及其子元素的所有HTML内容。 - `innerText`属性用于设置或获取文本节点中的纯文本内容，不包括任何HTML标签。 在代码片段中，使用`FF.innerText = 'td' + i;`来设置新创建的`<td>`元素的文本内容。 #### 知识点六：循环创建元素 通过循环可以批量创建多个相同的元素。在代码片段中，使用了`for`循环来重复创建10个`<td>`元素并添加到ID为"tr1"的`<tr>`元素中。 #### 知识点七：示例分析 下面是对代码片段的具体分析： ```html <table> <tr id="tr1"> <td> 1 </td> </tr> </table> <script> var tt = document.getElementById("tr1"); for (var i = 0; i < 10; i++) { var FF = document.createElement("<td></td>"); FF.innerText = 'td' + i; tt.appendChild(FF); } </script> ``` 1. **获取元素**：首先通过`document.getElementById("tr1")`获取到了表格中的第一行`<tr>`元素。 2. **创建元素**：接下来，使用`document.createElement("<td></td>")`创建一个新的`<td>`元素。 3. **设置内容**：设置新创建的`<td>`元素的文本内容，使用`FF.innerText = 'td' + i;`。 4. **添加元素**：使用`tt.appendChild(FF);`将新创建的`<td>`元素添加到`<tr>`元素的末尾。 #### 知识点八：错误与改进 在实际应用中需要注意的是，`document.createElement`函数应该只接收标签名作为参数，而不是完整的HTML字符串。因此，正确的写法应该是`document.createElement("td")`而不是`document.createElement("<td></td>")`。 #### 知识点九：其他相关知识点 除了以上提到的知识点外，还有一些与动态创建HTML节点相关的知识点值得了解： - **CSS样式**：可以使用JavaScript动态地为创建的元素添加或更改样式。 - **事件绑定**：可以为创建的元素绑定事件监听器，如点击事件等。 - **动态加载外部资源**：例如，可以动态加载脚本文件或样式表。 - **性能优化**：在大量创建元素时，可以考虑使用文档碎片（`DocumentFragment`）来提高性能。 动态创建HTML节点是Web开发中一个非常实用且重要的技能，能够帮助开发者构建更加灵活和动态的Web应用。通过学习这些基本概念和技术，你可以更好地利用JavaScript进行DOM操作，实现更复杂的页面交互效果。