title: Create HTML elements with php
body: <p>I have a image-heavy WordPress site. To help with loading, I'm using lazy loading.</p>
  
  <p>The lazyload plugin requires the img url in a <code>data-original</code> attribute.</p>
  
  <p>I'm changing the <code>img</code> element using the function to add the image url to <code>data-original</code> and the placeholder to the <code>src</code>:</p>
  
  <pre><code>function add_lazyload($content) {
       $dom = new DOMDocument();
       @$dom-&gt;loadHTML($content);
  
       foreach ($dom-&gt;getElementsByTagName('img') as $node) {
           $oldsrc = $node-&gt;getAttribute('src');
           $node-&gt;setAttribute("data-original", $oldsrc );
           $newsrc = ''.get_template_directory_uri().'/library/images/nothing.gif';
           $node-&gt;setAttribute("src", $newsrc);
           //create img tag
                   $element = $dom-&gt;createElement("img");
                   $dom-&gt;appendChild($element);
  
       }
       $newHtml = $dom-&gt;saveHtml();
       return $newHtml;
  }
  
  add_filter('the_content', 'add_lazyload');
  </code></pre>
  
  <p>The lazyloading is working but I wanted to add a non-JavaScript fallback. Is it possible with the above function to create a new <code>img</code> element using the <code>src</code> from the original <code>img</code>?</p>
  
  <p>So the new <code>img</code> element would look like this:</p>
  
  <pre><code>&lt;noscript&gt;&lt;img src="img/example.jpg" width="640" heigh="480"&gt;&lt;/noscript&gt;
  </code></pre>