原生js中如何添加dom元素

在原生JS中添加DOM元素的方法有很多种，主要包括创建新元素、设置元素属性、插入元素到DOM树中。下面详细介绍其中的步骤和方法。

一、创建新元素

1、使用`document.createElement`方法

你可以使用document.createElement方法来创建一个新的HTML元素。例如，创建一个新的div元素：

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

二、设置元素属性

1、使用`setAttribute`方法

设置元素的属性可以使用setAttribute方法。例如，给新创建的div设置一个id：

newDiv.setAttribute('id', 'newDivId');

2、直接设置属性

你也可以直接设置元素的属性，例如：

newDiv.id = 'newDivId';
newDiv.className = 'newDivClass';

三、插入元素到DOM树中

1、使用`appendChild`方法

将新创建的元素插入到DOM树中，可以使用appendChild方法。例如，将新创建的div插入到body中：

document.body.appendChild(newDiv);

2、使用`insertBefore`方法

如果你想把新创建的元素插入到某个特定元素之前，可以使用insertBefore方法。例如，将新创建的div插入到body中某个已有元素之前：

let existingElement = document.getElementById('existingElementId');
document.body.insertBefore(newDiv, existingElement);

四、添加文本内容

1、使用`textContent`属性

你可以使用textContent属性来添加文本内容。例如，给新创建的div添加文本内容：

newDiv.textContent = 'This is a new div';

2、使用`innerHTML`属性

你也可以使用innerHTML属性来添加HTML内容。例如：

newDiv.innerHTML = '<p>This is a paragraph inside the new div</p>';

五、添加事件监听

1、使用`addEventListener`方法

你可以使用addEventListener方法来给元素添加事件监听。例如，给新创建的div添加一个点击事件监听：

newDiv.addEventListener('click', function() {
    alert('Div clicked!');
});

六、复杂示例

1、完整示例代码

下面是一个完整的示例代码，展示了如何创建一个新的div元素，设置它的属性，添加文本内容，插入到DOM树中，并添加事件监听：

// 创建新元素
let newDiv = document.createElement('div');
// 设置元素属性
newDiv.id = 'newDivId';
newDiv.className = 'newDivClass';
// 添加文本内容
newDiv.textContent = 'This is a new div';
// 插入元素到DOM树中
document.body.appendChild(newDiv);
// 添加事件监听
newDiv.addEventListener('click', function() {
    alert('Div clicked!');
});

七、总结

在原生JS中添加DOM元素的步骤主要包括创建新元素、设置元素属性、插入元素到DOM树中。掌握这些基本步骤，可以帮助你灵活地操作DOM，创建更加动态和交互性的网站。通过不断实践和应用这些方法，你可以更好地理解和掌握DOM操作的技巧。

原生js中如何添加dom元素

一、创建新元素

1、使用document.createElement方法

二、设置元素属性

1、使用setAttribute方法