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