代码片段】JS对在DOM文档中指定位置插入元素

书中枫叶

于 2023-05-25 00:20:26 发布

阅读量558

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/html0010/article/details/130858129

版权

该段代码演示了如何使用JavaScript创建一个新的段落元素，并设置其样式，然后寻找页面上距离给定高度最近的元素，将新元素插入到该元素之前。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    const insertionHeight = 3.78 * 290;
    const newParagraph = document.createElement('p');
    newParagraph.style.height="50px";
    newParagraph.style.backgroundColor="red";

    const container = document.body; // 假设插入元素在文档的顶层元素中 *在哪个元素内插入

    // 遍历文档中所有的元素
    let closestElement = container;
    let distanceToClosest = Math.abs(insertionHeight - closestElement.offsetTop);
    for (const element of container.getElementsByTagName('*')) {
        const distance = Math.abs(insertionHeight - element.offsetTop);
        if (distance < distanceToClosest) {
            closestElement = element;
            distanceToClosest = distance;
        }
    }
    // 在距离所需高度最近的元素前面插入新元素
    closestElement.parentNode.insertBefore(newParagraph, closestElement);