dom添加节点举个例子
时间: 2024-10-24 08:18:47 浏览: 12
JS实现的DOM插入节点操作示例
DOM(Document Object Model)是一种用于处理HTML文档的标准模型,它允许程序动态地修改网页内容。在JavaScript中,我们可以使用`document.createElement()`方法创建新的节点,然后使用DOM API来添加到现有的元素中。
例如,在HTML中有一个简单的列表:
```html
<ul id="myList">
</ul>
```
如果你想在页面加载后动态地添加一个新的列表项 `<li>`,你可以这样做:
```javascript
// 创建新的列表项元素
var newItem = document.createElement('li');
// 给列表项添加文本
newItem.appendChild(document.createTextNode('新添加的项目'));
// 获取列表元素
var listElement = document.getElementById('myList');
// 将新的列表项添加到列表中
listElement.appendChild(newItem);
```
在这个例子中,我们首先创建了一个新的`<li>`元素,然后添加了文本内容,最后将这个新元素添加到了id为`myList`的`<ul>`标签内,实现了DOM节点的添加。
阅读全文