Question

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

我面临有点困难通过javascript我可以通过jquery来做。

请帮我解决这个问题

Answer 1

您需要使用来自父级的replaceChild： -

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: