title: I want to convert below html into specific structure using PHP How Can I achieve this using DOMDocument()?
body: <p>I am trying to convert Html in below structure but I don't how to achieve this.</p>
  <p>I have 2 text area one for input HTML Value and second for Output that I want.
  I want when I give</p>
  <p><strong>INPUT: Original HTML Code:</strong></p>
  <pre><code>&lt;div class='first_class second_class thrid_c..' id=&quot;myid&quot;&gt;
        &lt;div style='blackground: red;color: white;' &gt;
            &lt;img src='http://ddd.com/photo.jpg' height='10'&gt;
            &lt;span&gt; My text Class &lt;/span&gt;
        &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>Output Code Structure will be:</strong></p>
  <pre><code>appendMultipleNodes(
          createNewElement('div', {'class': 'first_class second_class thrid_c..'', 'id': 'myid' }),
          appendMultipleNodes(
               createNewElement('div', {'style': 'blackground: red;color: white;' }),
               createNewElement('div', {'src': 'http://ddd.com/photo.jpg', 'height': '10' }),
               createNewElement('span', {'text': 'My text Class' })
           )
      )
  </code></pre>
  <p><strong>INPUT: If HTML Code:</strong></p>
  <pre><code>&lt;div class=&quot;position-fixed bottom-0 end-0 p-3&quot; style=&quot;&quot;&gt;
      &lt;div id=&quot;liveToast&quot; class=&quot;toast fade&quot; role=&quot;alert&quot; aria-live=&quot;assertive&quot; aria-atomic=&quot;true&quot; style=&quot;&quot;&gt;
          &lt;div class=&quot;toast-header&quot;&gt;
              &lt;svg class=&quot;bd-placeholder-img rounded me-2&quot; width=&quot;20&quot; height=&quot;20&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; focusable=&quot;false&quot;&gt;
                 &lt;rect width=&quot;100%&quot; height=&quot;100%&quot; fill=&quot;#007aff&quot;&gt;&lt;/rect&gt;
              &lt;/svg&gt;
  
              &lt;strong class=&quot;me-auto&quot;&gt;Bootstrap&lt;/strong&gt;
              &lt;small&gt;11 mins ago&lt;/small&gt;
              &lt;button type=&quot;button&quot; class=&quot;btn-close&quot; data-bs-dismiss=&quot;toast&quot; aria-label=&quot;Close&quot;&gt;&lt;/button&gt;
          &lt;/div&gt;
          &lt;div class=&quot;toast-body&quot;&gt;
              Hello, world! This is a toast message.
           &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>Output Code Structure will be:</strong></p>
  <pre><code>appendMultipleNodes(
      createNewElement('div', {'class': 'position-fixed bottom-0 end-0 p-3', 'style': '' }),
      appendMultipleNodes(
          createNewElement('div', {'id': 'liveToast', 'class': 'toast fade', 'role': 'alert', 'aria-live': 'assertive', 'aria-atomic': 'true', 'style': ''  }),
          appendMultipleNodes(
              createNewElement('div', {'class': 'toast-header'}),
              appendMultipleNodes(
                  createNewElement('svg', {'class': 'bd-placeholder-img rounded me-2', 'width': '20', 'height': '20', 'xmlns': 'http://www.w3.org/2000/svg', 'focusable': 'false'}),
                  createNewElement('rect', {'width': '100%', 'height': '100%', 'fill': '#007aff'})
              ),
              createNewElement('strong', {'class': 'me-auto', 'text': 'Bootstrap'}),
              createNewElement('small', {'text': '11 mins ago'}),
              createNewElement('button', {'class': 'btn-close', 'type': 'button', 'data-bs-dismiss': 'toast', 'aria-label': 'Close'})    
          ),
          createNewElement('div', {'class': 'toast-body', 'text': 'Hello, world! This is a toast message.'})
       )
  )
  </code></pre>
  <p>I have tried Domdocument to achieve this but not achieve the goal.
  anyone can help me?</p>