在 JavaScript 中,你可以使用 document.createElement
来创建一个新的图片元素,然后使用 document.getElementById
来获取目标 div
元素,并使用 appendChild
方法将新创建的图片元素插入到 div
的最前面。不过,appendChild
方法会将元素添加到子元素的末尾,所以你需要先获取 div
的第一个子元素,然后使用 insertBefore
方法来将图片元素插入到最前面。
以下是一个示例代码:
// 创建一个新的图片元素
var imgElement = document.createElement('img');
// 设置图片的 src 属性
imgElement.src = 'test.jpg';// 获取 id 为 img1 的 div 元素
var divElement = document.getElementById('img1');// 检查 div 元素是否存在
if (divElement) {// 获取 div 元素的第一个子元素var firstChild = divElement.firstChild;// 如果 div 元素有子元素,使用 insertBefore 方法将图片元素插入到最前面if (firstChild) {divElement.insertBefore(imgElement, firstChild);} else {// 如果 div 元素没有子元素,直接使用 appendChild 方法添加图片元素divElement.appendChild(imgElement);}
}
这段代码首先创建了一个新的 img
元素,并设置了其 src
属性为 test.jpg
。然后,它获取了 id
为 img1
的 div
元素。如果 div
元素存在,代码会检查它是否有子元素。如果有子元素,就使用 insertBefore
方法将图片元素插入到第一个子元素之前;如果没有子元素,就使用 appendChild
方法将图片元素添加到 div
元素中。