如何按100px间隔添加元素并迁移内容？求JS/jQuery/PHP方案

我来给你整理几个可行的实现方案，分别用原生JavaScript、jQuery和PHP来满足你的两个需求——把.message-append的内容移入.subpage容器，同时每隔100px插入<div>end</div>元素：

原生JavaScript方案 #

这个方案不需要依赖任何库，直接用浏览器原生API实现：

document.addEventListener('DOMContentLoaded', function() {
    // 1. 将.message-append的内容放入所有.subpage容器中
    const messageAppend = document.querySelector('.message-append');
    const subpages = document.querySelectorAll('.subpage');
    
    if (messageAppend && subpages.length > 0) {
        const messageContent = messageAppend.innerHTML;
        subpages.forEach(subpage => {
            // 克隆内容并添加到subpage中（如果不想移动原元素用clone，想移动直接appendChild）
            const contentClone = document.createElement('div');
            contentClone.innerHTML = messageContent;
            subpage.appendChild(contentClone);
        });
        // 可选：如果不需要保留原.message-append元素，可以移除它
        // messageAppend.remove();
    }

    // 2. 每隔100px插入<div>end</div>元素
    const insertEndDiv = () => {
        // 先清除已存在的end元素，避免重复插入
        document.querySelectorAll('div.end').forEach(el => el.remove());
        
        const body = document.body;
        const totalHeight = body.scrollHeight;
        let currentPosition = 100; // 从100px位置开始插入

        while (currentPosition < totalHeight) {
            const endDiv = document.createElement('div');
            endDiv.classList.add('end');
            endDiv.textContent = 'end';
            endDiv.style.position = 'absolute';
            endDiv.style.top = `${currentPosition}px`;
            endDiv.style.width = '100%';
            body.appendChild(endDiv);
            currentPosition += 100;
        }
    };

    // 页面加载完成后执行插入
    insertEndDiv();
    // 窗口大小改变时重新计算插入（因为高度可能变化）
    window.addEventListener('resize', insertEndDiv);
});

说明： #

• 先等待DOM加载完成，确保能正确获取目标元素
• 把.message-append的内容克隆后添加到每个.subpage中，也可以直接移动原元素（如果不需要保留它的话）
• 插入<div>end</div>时用绝对定位，每隔100px在页面垂直方向添加，同时监听窗口 resize 事件，确保窗口大小变化时重新计算位置

jQuery方案 #

如果你的项目已经引入了jQuery，这个方案会更简洁：

$(document).ready(function() {
    // 1. 将.message-append的内容放入所有.subpage容器中
    const messageContent = $('.message-append').html();
    $('.subpage').each(function() {
        $(this).append(messageContent);
    });
    // 可选：移除原元素
    // $('.message-append').remove();

    // 2. 每隔100px插入<div>end</div>元素
    const insertEndDiv = () => {
        $('div.end').remove(); // 先移除已存在的end元素，避免重复插入
        const totalHeight = $('body').height();
        for (let pos = 100; pos < totalHeight; pos += 100) {
            $('<div class="end">end</div>').css({
                position: 'absolute',
                top: `${pos}px`,
                width: '100%'
            }).appendTo('body');
        }
    };

    insertEndDiv();
    $(window).resize(insertEndDiv);
});

说明： #

• 利用jQuery的选择器和DOM操作方法，代码更简洁直观
• 插入前先清除已有的.end元素，避免窗口 resize 时重复添加
• 同样支持窗口大小变化时重新计算插入位置

PHP方案（服务器端处理） #

如果需要在服务器端生成HTML时完成这两个操作，PHP可以这样实现：

<?php
// 假设你的原始HTML内容
$originalHtml = '<div class="page"> <div class="subpage"></div> </div> <div class="page"> <div class="subpage"></div> </div> <div class="message-append"><p><strong>This article examines fou...</strong></p></div>';

// 1. 提取.message-append的内容
preg_match('/<div class="message-append">(.*?)<\/div>/s', $originalHtml, $matches);
$messageContent = isset($matches[1]) ? $matches[1] : '';

// 2. 将内容替换到所有.subpage容器中
$processedHtml = preg_replace('/<div class="subpage"><\/div>/', "<div class=\"subpage\">$messageContent</div>", $originalHtml);

// 3. 移除原.message-append元素（可选）
$processedHtml = preg_replace('/<div class="message-append">.*?<\/div>/s', '', $processedHtml);

// 4. 模拟每隔100px插入<div>end</div>（注意：PHP是服务器端，无法直接获取客户端像素高度）
// 这里按段落分割插入，你可以根据实际内容高度调整间隔
$contentParts = explode('</p>', $processedHtml);
$finalHtml = '';
$insertInterval = 1; // 每1个段落插入一次
$count = 0;
foreach ($contentParts as $part) {
    $finalHtml .= $part . ($part ? '</p>' : '');
    $count++;
    if ($count % $insertInterval === 0) {
        $finalHtml .= '<div class="end">end</div>';
    }
}

// 输出最终HTML
echo $finalHtml;
?>

说明： #

• PHP作为服务器端语言，无法直接获取客户端页面的像素高度，所以精确的每隔100px插入更适合用客户端JS实现
• 这里的示例是按段落分割插入<div>end</div>，你可以根据实际内容的高度调整插入间隔
• 先提取.message-append的内容，再替换到每个.subpage中，最后移除原元素（可选）

内容的提问来源于stack exchange，提问作者Hasan Tareq