使用javascript将HTML内容替换为其他内容

replace html content with other using javascript

本文关键字：其他 替换 javascript HTML 使用      更新时间：2023-09-26

我有像下面这样的HTML结构

<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>

现在我想替换

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


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

我正面临着一点困难，我可以通过jquery做到这一点。

请帮我一下

您需要使用父级的replaceChild:-

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>

相关文章：