DOM 元素的增删改

本文主要是介绍DOM 元素的增删改，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、DOM元素中的增加、删除、修改

1、创建元素

const div = document.createElement('div'); // 创建一个 div 元素

2、增加元素

const div = document.createElement('div'); // 创建一个 div 元素
document.getElementById('box').appendChild(div); // 创建好之后追加到 box 里面
document.getElementsByClassName('wapper').insertBeofore(div); // 把 div 插入到 .wapper 之前

3、删除元素

const div = document.createElement('div'); // 创建一个 div 元素
document.getElementById('box').remove(div); // 从 box 中移除 div

4、给 DOM 设置内容

document.getElementById('box').innerHTML = '<div>我是内容</div>'; // innerHTML 会解析标签
document.getElementById('box').innerText = '<div>我是内容</div>'; // innerText 不会解析标签
document.getElementsByName('user-id').value = 10; // value 一般用在表单里面

5. 替换元素

const div = document.createElement('div'); // 创建一个 div 元素
document.getElementById('box').appendChild(div); // 创建好之后追加到 box 里面

const p = document.createElement('p');
document.getElementById('box').replaceChild(div, p); // 把已经存在的 div 替换成 p

这篇关于DOM 元素的增删改的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！