在 createElement() 中克隆并插入节点

Question

我正在编写一些代码来更改图像标签以支持延迟加载，我想在每个图像之前插入一个包含原始图像节点的 <noscript> 标签。

我卡在了在 <noscript> 标签内插入图像节点副本的部分。我是 DomDocument 的新手，所以我确定我一定是做错了什么。如何克隆图像标签并将其插入到我正在创建的新 <noscript> 元素中？

function lazy_load_images($content) {
    if ($content) {
        $DOM = new DOMDocument();
        $DOM->loadHTML($content, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);

        $images = $DOM->getElementsByTagName("img");

        foreach ($images as $image) {
            $existing_src    = $image->getAttribute("src");
            $existing_srcset = $image->getAttribute("srcset");

            // add noscript before images (here's where the hang-up is)
            $DOM->documentElement->insertBefore($DOM->createElement("noscript", $image->cloneNode(false)), $image->nextSibling);

            // change src to data-normal
            if ($existing_src) {
                $image->removeAttribute("src");
                $image->setAttribute("data-normal", $existing_src);
            }

            // change srcset to data-srcset
            if ($existing_srcset) {
                $image->removeAttribute("srcset");
                $image->setAttribute("data-srcset", $existing_srcset);
            }

            // add _js class
            $image->setAttribute("class", "_js {$image->getAttribute("class")}");
        }

        return $DOM->saveHTML();
    }
}

Answer 1

根据评论。 createElement 具有名称和值的字符串参数，因此创建 <noscript> 节点并将克隆的节点附加到该节点，然后将其插入。

$noscript = $DOM->createElement("noscript");
$noscript->appendChild($image->cloneNode());
$image->parentNode->insertBefore($noscript, $image->nextSibling);

我注意到，如果您使用 $images = $DOM->getElementsByTagName("img");，循环似乎永远不会结束。如果您改用 $images = $xp->query('//img');，它似乎可以工作。

$xp = new DOMXPath($DOM);

$images = $xp->query('//img');

在 createElement() 中克隆并插入节点

Clone and insert node within createElement()

php

dom

domdocument