在 div 中附加元素作为第一个子元素

在 web 开发过程中，经常需要通过 JavaScript 动态地向网页中添加元素。其中，一种常见的需求是将一个新元素作为已有 div 元素的第一个子元素添加到 div 中。下面介绍在 div 中附加元素作为第一个子元素的方法。

方法一：使用 insertBefore 方法

可以使用 JavaScript DOM 中的 insertBefore 方法将一个新元素添加到指定元素的前面。对于 div 元素，可以使用该方法将新元素添加为其第一个子元素。具体代码如下：

let parent = document.getElementById('parent'); // 获取父元素
let newElement = document.createElement('div'); // 创建新元素
newElement.innerText = '我是新的子元素'; // 给新元素添加内容
parent.insertBefore(newElement, parent.firstChild); // 将新元素插入到父元素的第一个子元素前面

在上面的代码中，通过 document.getElementById 方法获取了父元素并将其存储在变量 parent 中，然后使用 document.createElement 方法创建了一个新 div 元素，并将其存储在变量 newElement 中。接着，通过赋值语句给新元素添加了文本内容。最后，使用 parent.insertBefore 方法将新元素插入到父元素的第一个子元素前面。

方法二：使用 innerHTML 属性

除了使用 insertBefore 方法外，还可以使用 div 元素的 innerHTML 属性将一个新元素添加为其第一个子元素。具体代码如下：

let parent = document.getElementById('parent'); // 获取父元素
let newElement = document.createElement('div'); // 创建新元素
newElement.innerText = '我是新的子元素'; // 给新元素添加内容
parent.innerHTML = newElement.outerHTML + parent.innerHTML; // 将新元素插入到父元素的最前面

在上面的代码中，创建新元素的代码和给新元素添加内容的代码与方法一相同。parent.innerHTML 属性获取了父元素的 HTML 内容，然后使用新元素的 outerHTML 属性得到新元素的 HTML 内容，并将其与父元素的 HTML 内容组合成一个新的字符串。最后将其赋值给 parent.innerHTML 属性，即可将新元素插入到父元素的最前面。

以上两种方法都可以实现在 div 中附加元素作为第一个子元素的需求，具体使用哪种方法可以根据实际情况来选择。