title: PHP DOM - How to insert element in a specific position?
body: <p>In a nutshell, this is what I'm trying to do:</p>
  
  <ol>
  <li>Get all <code>&lt;img&gt;</code> tags from a document</li>
  <li>Set a <code>data-src</code> attribute (for lazy loading)</li>
  <li>Empty their sources (for lazy loading)</li>
  <li>Inject a <code>&lt;noscript&gt;</code> tag after this image</li>
  </ol>
  
  <p>1-3 are fine. I just can't get the created <code>&lt;noscript&gt;</code> tag to be beside the image correctly.</p>
  
  <p>I'm trying with <code>insertBefore</code> but I'm open for suggestions:</p>
  
  <pre class="lang-php prettyprint-override"><code>// Create a DOMDocument instance
  $dom = new DOMDocument;
  
  $dom-&gt;formatOutput = true;
  $dom-&gt;preserveWhiteSpace = false;
  
  // Loads our content as HTML
  $dom-&gt;loadHTML($content);
  
  // Get all of our img tags
  $images = $dom-&gt;getElementsByTagName('img');
  
  // How many of them
  $len = count($images);
  
  // Loop through all the images in this content
  for ($i = 0; $i &lt; $len; $i++) {
  
      // Reference this current image
      $image = $images-&gt;item($i);
  
      // Create our fallback image before changing this node
      $fallback_image = $image-&gt;cloneNode();
  
      // Add the src as a data-src attribute instead
      $image-&gt;setAttribute('data-src', $src);
  
      // Empty the src of this img
      $image-&gt;setAttribute('src', '');
  
      // Now prepare our &lt;noscript&gt; markup
      // E.g &lt;noscript&gt;&lt;img src="foobar.jpg" /&gt;&lt;/noscript&gt;
      $noscript = $dom-&gt;createElement("noscript");
      $noscript-&gt;appendChild( $fallback_image );
  
      $image-&gt;parentNode-&gt;insertBefore( $noscript, $image );
  }
  
  return $dom-&gt;saveHTML();
  </code></pre>
  
  <p>Having two images in the page, this is the result (abbreviated for clarity's sake):</p>
  
  <p>Before:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div&gt;
      &lt;img /&gt;
      &lt;p /&gt;
  &lt;/div&gt;
  &lt;p&gt;
      &lt;img /&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>After:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div&gt;
      &lt;img /&gt; &lt;!-- this should be the fallback wrapped in &lt;noscript&gt; that is missing --&gt;
      &lt;p&gt;
          &lt;img /&gt;
      &lt;/p&gt;
  &lt;/div&gt;
  &lt;p&gt;
      &lt;img /&gt; &lt;!-- nothing happened here --&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>Using <code>$dom-&gt;appendChild</code> works but the <code>&lt;noscript&gt;</code> tag should be beside the image and not at the end of the document.</p>
  
  <p>My PHP skills are very rusty so I'd appreciate any clarification or suggestions.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Just realised <code>saveHTML()</code> was also adding <code>&lt;DOCTYPE&gt;&lt;html&gt;&lt;body&gt;</code> tags, so I've added a <code>preg_replace</code> (until I find a better solution) to take care of removing that.</p>
  
  <p>Also, the output I have pasted before was based on the inspector of Chrome's Developer Tools. </p>
  
  <p>I checked the <code>viewsoure</code> to see what was really going on (and thus found out about the  tag). </p>
  
  <p>This is what's <strong>really</strong> happening:
  <a href="https://eval.in/114620" rel="nofollow">https://eval.in/114620</a></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div&gt;
      &lt;img /&gt; &lt;/noscript&gt; &lt;!-- wha? just a closing noscript tag --&gt;
      &lt;p /&gt;
  &lt;/div&gt;
  &lt;p&gt;
      &lt;img /&gt; &lt;!-- nothing happened here --&gt;
  &lt;/p&gt;
  </code></pre>