title: PHP DOM function adding an extra <p> <html> and a <body> tags
body: <p>I use the following function to show a different image to desktop and mobile user depending on their device.</p>
  
  <p><strong>My index.php file</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html class="no-js" lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="x-ua-compatible" content="ie=edge"&gt;
      &lt;title&gt;Testing Page&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;?php 
  define("DEVICE", "desktop");
  ob_start(); 
  ?&gt;
  &lt;?php echo 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' . '&lt;br/&gt;'?&gt; 
  &lt;?php echo 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' . '&lt;br/&gt;'?&gt; 
  &lt;?php echo 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' . '&lt;br/&gt;'?&gt; 
  &lt;?php echo 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' . '&lt;br/&gt;'?&gt; 
  &lt;?php echo 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' . '&lt;br/&gt;'?&gt; 
  &lt;?php echo 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' . '&lt;br/&gt;'?&gt; 
  &lt;div&gt;
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  &lt;img src="/desktop-img/blog-1.png" alt="blog-1"&gt;
  &lt;img src="/desktop-img/blog-2.png" alt="blog-2"&gt;
  &lt;img src="/desktop-img/blog-3.png" alt="blog-3"&gt;
  &lt;/div&gt;
  &lt;?php
  // Assign bufferred content to a variable for further processing
  $content = ob_get_clean();
  
  // Device specific images
  function selectPaths($tag){
  
      // If paths is wrapped in &lt;pre&gt; or &lt;code&gt; tags
      if($tag-&gt;nodeName=="pre" || $tag-&gt;nodeName=="code"){
          return;
      // If not wrapped witihn &lt;pre&gt; or &lt;code&gt; tags
      } elseif($tag-&gt;nodeName=="img"){
          // Replace device specific path
          $tag-&gt;attributes-&gt;getNamedItem("src")-&gt;nodeValue=str_replace('desktop-img', DEVICE . '-img',$tag-&gt;attributes-&gt;getNamedItem("src")-&gt;nodeValue);
      } elseif($tag-&gt;hasChildNodes()){
          foreach($tag-&gt;childNodes as $child){
              selectPaths($child);
          }
      }
  }
  
  function deviceImages($content){
  
      $dom=new DOMDocument;
      $dom-&gt;preserveWhiteSpace=true;
      libxml_use_internal_errors(true);
      $dom-&gt;loadHTML($content);
      libxml_clear_errors();
      $root=$dom-&gt;documentElement;
      selectPaths($root);
      $dom-&gt;formatOutput=false;
      //Assign to variable
      $content = $dom-&gt;saveHTML($root);
      return $content;
  }
  $content = deviceImages ($content);
  ?&gt;
  &lt;div id='wrapper'&gt;
      &lt;?php echo $content; ?&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>My challenge:</strong></p>
  
  <p>This function is adding a <code>&lt;p&gt;</code> tag and also and extra <code>&lt;html&gt;&lt;body&gt;</code> tags to my output.</p>
  
  <p><strong>My output image</strong>
  <a href="https://i.stack.imgur.com/zqIYB.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zqIYB.jpg" alt="enter image description here"></a></p>
  
  <p><strong>My output Source code</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html class="no-js" lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="x-ua-compatible" content="ie=edge"&gt;
      &lt;title&gt;Testing Page&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id='wrapper'&gt;
      &lt;html&gt;&lt;body&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;br&gt; 
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;br&gt; 
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;br&gt; 
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;br&gt; 
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;br&gt; 
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;br&gt;&lt;/p&gt;
  &lt;div&gt;
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  &lt;img src="/desktop-img/blog-1.png" alt="blog-1"&gt;&lt;img src="/desktop-img/blog-2.png" alt="blog-2"&gt;&lt;img src="/desktop-img/blog-3.png" alt="blog-3"&gt;
  &lt;/div&gt;
  &lt;/body&gt;&lt;/html&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>My output source code image</strong></p>
  
  <p><a href="https://i.stack.imgur.com/n6823.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n6823.jpg" alt="enter image description here"></a></p>
  
  <p><strong>My question:</strong></p>
  
  <p>How can I avoid this <code>&lt;p&gt;</code> <code>&lt;html&gt;</code> and <code>&lt;body&gt;</code> tags?</p>
  
  <p><strong>UPDATED</strong></p>
  
  <p>Updated as per the suggestion of @Aknosis about the <code>&lt;br/&gt;</code> tags.</p>