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