replace html content with other using javascript

Question

i have html structure like below

<div class="block-compose">
<button class="icon icon-smiley btn-emoji"></button>
<div tabindex="-1" class="input-container">
    <div class="input-emoji">
        <div class="input-placeholder" style="display: none;">Type a message</div>
        <div dir="auto" spellcheck="true" data-tab="1" contenteditable="true" class="input">how r u</div>
    </div>
</div>
<div class="ptt-container"><span><button class="icon btn-icon icon-ptt"></button></span></div></div>

now i want to replace

<div class="ptt-container"><span><button class="icon btn-icon icon-ptt"></button></span></div>

by

<button class="icon btn-icon icon-send send-container"></button>

i am facing bit difficult do via javascript i am able to do it via jquery .

please help me with this

Answer 1

you need to use replaceChild from the parent:-

 var container = document.getElementsByClassName('ptt-container')[0]; var button = document.createElement('button'); button.className = 'icon btn-icon icon-send send-container'; container.parentElement.replaceChild(button, container); 

 <div class="block-compose"> <button class="icon icon-smiley btn-emoji"></button> <div tabindex="-1" class="input-container"> <div class="input-emoji"> <div class="input-placeholder" style="display: none;">Type a message</div> <div dir="auto" spellcheck="true" data-tab="1" contenteditable="true" class="input">how r u</div> </div> </div> <div class="ptt-container"><span><button class="icon btn-icon icon-ptt"></button></span> </div> </div>