JS 添加子元素|极客笔记

JS 添加子元素

在前端开发中，经常需要动态向页面中添加元素。通过JavaScript可以很方便地实现向某个元素添加子元素的功能。本文将详细介绍如何使用JS向父元素中添加子元素。

方法一：createElement 和 appendChild

最常见的方法是使用document.createElement和appendChild方法。这两个方法可以动态创建一个新的元素，并将其添加到指定的父元素中。

// 创建一个新的 div 元素
var newDiv = document.createElement('div');

// 设置该 div 元素的内容
newDiv.innerHTML = '这是一个新的 div 元素';

// 获取父元素
var parent = document.getElementById('parent-element');

// 将新创建的 div 元素添加到父元素中
parent.appendChild(newDiv);

上面的代码首先创建了一个新的div元素，然后设置了该元素的内容，接着使用getElementById方法获取父元素，并最后通过appendChild方法将新创建的div元素添加到父元素中。

运行上述代码后，父元素中就会动态添加一个新的div元素，内容为“这是一个新的 div 元素”。

方法二：innerHTML

除了使用createElement和appendChild方法之外，还可以直接通过父元素的innerHTML属性来添加子元素。

// 获取父元素
var parent = document.getElementById('parent-element');

// 直接设置父元素的 innerHTML 属性
parent.innerHTML += '<div>这是一个新的 div 元素</div>';

上面的代码直接将一个div元素的字符串形式通过innerHTML属性添加到了父元素中。

方法三：insertAdjacentHTML

另外一个常用的方法是使用insertAdjacentHTML方法。该方法可以在指定的位置插入指定的 HTML 字符串。

// 获取父元素
var parent = document.getElementById('parent-element');

// 在父元素的末尾插入一个新的 div 元素
parent.insertAdjacentHTML('beforeend', '<div>这是一个新的 div 元素</div>');

insertAdjacentHTML方法接受两个参数，第一个参数指定插入的位置，可以是beforebegin、afterbegin、beforeend或afterend，第二个参数是要插入的 HTML 字符串。