javascript动态创建及删除元素的方法

下面我来详细讲解“javascript动态创建及删除元素的方法”的完整攻略。

1. 动态创建元素

1.1 createElement方法

要动态创建元素，首先需要使用document.createElement()方法来创建一个指定类型的HTML元素。例如，如果我们想要创建一个<div>元素，就可以使用如下代码：

let divElement = document.createElement('div');

1.2 设置属性和内容

接下来，可以使用JS方法来设置元素的属性和内容。例如，设置元素的id属性：

divElement.id = 'myDiv';

设置元素的class属性：

divElement.className = 'myClass';

设置元素的内容：

divElement.textContent = 'Hello World!';

同时也可以使用innerHTML属性来设置HTML的内容：

divElement.innerHTML = '<p>Hello World!</p>';

在设置好元素的属性和内容后，我们需要将其添加到页面中。可以使用appendChild方法将其添加到页面中。

例如，将创建的<div>元素添加到body元素中：

document.body.appendChild(divElement);

1.3 完整示例

下面是一个完整的示例，用于创建一个<ul>元素，并添加三个<li>元素：

let ulElement = document.createElement('ul');

let liElement1 = document.createElement('li');
liElement1.textContent = 'Item 1';

let liElement2 = document.createElement('li');
liElement2.textContent = 'Item 2';

let liElement3 = document.createElement('li');
liElement3.textContent = 'Item 3';

ulElement.appendChild(liElement1);
ulElement.appendChild(liElement2);
ulElement.appendChild(liElement3);

document.body.appendChild(ulElement);

2. 动态删除元素

2.1 remove方法

要动态删除元素，可以使用remove()方法来删除指定的HTML元素。例如，我们有一个指定ID为myDiv的<div>元素，可以使用如下代码将其删除：

let myDiv = document.getElementById('myDiv');
myDiv.remove();

2.2 parentNode和removeChild方法

同时，也可以使用parentNode和removeChild()方法来删除指定的HTML元素。例如，我们有一个指定ID为myDiv的<div>元素，可以使用如下代码将其删除：

let parent = document.getElementById('parentElement');
let myDiv = document.getElementById('myDiv');
parent.removeChild(myDiv);

需要注意的是，使用parentNode和removeChild()方法需要先获取元素的父元素。在上面的例子中，我创建了一个仅用于演示的ID为parentElement的父元素。你需要根据自己的实际情况来获取真正的父元素。

2.3 完整示例

下面是一个完整的示例，用于从页面中删除<ul>元素及其子元素：

let ulElement = document.getElementById('myUl');
let parent = ulElement.parentNode;
parent.removeChild(ulElement);

以上是关于“javascript动态创建及删除元素的方法”的完整攻略，希望能对你有所帮助。