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