JavaScript实现动态添加、移除元素或属性的方法分析

动态添加元素

方法一：createElement()方法

我们可以使用createElement()方法来创建一个新的元素节点，然后将该节点添加到文档中的某个元素中作为其子元素。其基本语法为：

document.createElement(tagName)

其中，tagName指定新节点的标签名称，例如我们要创建一个<p>标签，则可以如下操作：

let p = document.createElement('p'); // 创建一个新的p标签
p.innerHTML = '新添加的段落'; // 给该标签设置文本内容
document.body.appendChild(p); // 将该标签添加为body元素的子元素

上述代码将在当前文档的末尾添加一个新的<p>标签，并将其作为body元素的子元素。

方法二：innerHTML属性

我们还可以使用innerHTML属性来向文档中添加任意HTML代码。其基本语法为：

element.innerHTML = html

其中，element指定要添加HTML代码的目标元素，html是要添加的HTML代码。例如，我们要向body元素中添加一个<p>标签，则可以如下操作：

document.body.innerHTML += '<p>新添加的段落</p>';

上述代码将在当前文档的末尾添加一个新的<p>标签，并将其作为body元素的子元素。

动态移除元素

方法一：removeChild()方法

我们可以使用removeChild()方法来移除文档中的某个元素节点。其基本语法为：

parentElement.removeChild(childElement)

其中，parentElement指定要移除子元素的父元素节点，childElement指定要移除的子元素节点。例如，我们要将body元素中的第一个<p>标签移除，则可以如下操作：

let p = document.getElementsByTagName('p')[0]; // 获取第一个p标签
document.body.removeChild(p); // 将其从body元素中移除

上述代码将从当前文档中移除第一个<p>标签。

方法二：innerHTML属性

同样地，我们也可以使用innerHTML属性来移除整个元素节点及其所有子元素。其基本语法为：

element.innerHTML = ''

例如，我们要将body元素中的所有<p>标签移除，则可以如下操作：

document.body.innerHTML = '';

上述代码将移除body元素中的所有子元素。

动态添加属性

方法一：setAttribute()方法

我们可以使用setAttribute()方法来设置某个元素节点的属性。其基本语法为：

element.setAttribute(attribute, value);

其中，element指定要设置属性的元素节点，attribute指定要设置的属性名称，value指定要设置的属性值。例如，我们要向一个<a>标签中添加href属性，则可以如下操作：

let a = document.createElement('a'); // 创建一个新的a标签
a.setAttribute('href', 'http://www.example.com/'); // 给该标签添加href属性
document.body.appendChild(a); // 将该标签添加为body元素的子元素

上述代码将向当前文档末尾添加一个新的<a>标签，并将其作为body元素的子元素，同时该标签还包含了href属性。

方法二：直接设置属性值

我们也可以直接设置某个元素节点的属性值。例如，我们要向一个<a>标签中添加href属性，则可以如下操作：

let a = document.createElement('a'); // 创建一个新的a标签
a.href = 'http://www.example.com/'; // 直接给该标签添加href属性
document.body.appendChild(a); // 将该标签添加为body元素的子元素

上述代码与上一个示例代码的效果是一样的，只不过是直接设置了href属性的值。