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

关注

原创最新推荐文章于 2026-08-10 16:54:31 发布 638 阅读 AI 写同款· GEO 优化 ›

JavaScript实用代码片段集合在现代Web开发中，代码片段库（code snippet libraries）扮演着至关重要的角色。它们是被精心设计和组织好的代码块集合，可以被开发者直接复用，从而显著提高开发效率，减少重复劳动。代码片段库包含了常见功能的实现，如数据操作、UI组件的初始化、事件处理等。通过引用这些代码片段，开发者可以避免从头编写相同的代码，集中精力解决更具挑战性的问题。在复杂的项目中，我们可能需要在自定义事件中传递数据，这时就需要创建和触发自定义事件。可以使用来创建事件。阅读详情

    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);