js如何通过class类动态添加元素
时间: 2023-05-28 08:01:41 浏览: 308
我们可以使用JavaScript来通过class类动态添加元素,代码如下:
1. 首先,我们可以选择一个现有的元素作为父元素,如下:
```javascript
const parent = document.querySelector('.parent-class');
```
2. 然后,我们可以创建一个新的元素,比如创建一个div元素,如下:
```javascript
const newElement = document.createElement('div');
```
3. 接下来,我们可以给新的元素添加需要的类名,如下:
```javascript
newElement.classList.add('new-class');
```
4. 接着,我们可以设置新元素的属性和内容,如下:
```javascript
newElement.setAttribute('id', 'new-id');
newElement.textContent = 'New element';
```
5. 最后,我们可以将新元素添加到父元素中,如下:
```javascript
parent.appendChild(newElement);
```
完整代码如下:
```javascript
const parent = document.querySelector('.parent-class');
const newElement = document.createElement('div');
newElement.classList.add('new-class');
newElement.setAttribute('id', 'new-id');
newElement.textContent = 'New element';
parent.appendChild(newElement);
```