如何使用JS将整个HTML字符串替换为另一个HTML字符串?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (2007)

我想问一下如何用JS替换整个属性。我需要更换这个:

<div class="content twitter-container twitter-tab active" id="panel2-3">
  <div id="ember1069" class="ember-view tse-scrollable">
    <div class="tse-scrollbar" style="display: block;">
      <div class="drag-handle" style="top: 2px; height: 81px;"></div>
    </div>
    <div class="tse-scroll-content" style="width: 374px; height: 836px;">
      <div class="tse-content">
        <div id="ember1087" class="ember-view"><!----></div>
      </div>
    </div>
  </div>
</div>

因此:

<div class="content twitter-container twitter-tab active" id="panel2-3" aria-hidden="false">
  <div id="ember1123" class="ember-view tse-scrollable">
    <div class="tse-scrollbar" style="display: none;">
      <div class="drag-handle" style="top: 2px; height: 81px;"></div>
    </div>
  <div class="tse-scroll-content" style="width: 374px; height: 836px;">
    <div class="chat">
      <iframe id="chat_embed" src="https://www.twitch.tv/embed/?????????/chat?darkpopout" scrolling="no" width="374" height="836" frameborder="0">&amp;amp;amp;amp;lt;br /&amp;amp;amp;amp;gt;
      </iframe>
    </div>
  </div>
</div>

我需要找到第一个脚本在网站上,并改变它与第二个。我试过像有人建议的那样:

 (function() {
 'use strict';
const htmlString = `
<div class="content twitter-container twitter-tab active" id="panel2-3" aria-hidden="false">
 <div id="ember1123" class="ember-view tse-scrollable">
  <div class="tse-scrollbar" style="display: none;">
    <div class="drag-handle" style="top: 2px; height: 81px;"></div>
  </div>
 <div class="tse-scroll-content" style="width: 374px; height: 836px;">
  <div class="chat">
    <iframe id="chat_embed" src="https://www.twitch.tv/embed/?????????/chat?darkpopout" scrolling="no" width="374" height="836" frameborder="0">&amp;amp;amp;amp;lt;br /&amp;amp;amp;amp;gt;
    </iframe>
  </div>
 </div>
 </div>
 `;

document.querySelector('.parent').innerHTML = htmlString;
var myvar = '<div class="parent">'+
'  <div class="content twitter-container twitter-tab active" id="panel2-3">'+
'    <div id="ember1069" class="ember-view tse-scrollable">'+
'      <div class="tse-scrollbar" style="display: block;">'+
'        <div class="drag-handle" style="top: 2px; height: 81px;"></div>'+
'      </div>'+
'      <div class="tse-scroll-content" style="width: 374px; height: 836px;">'+
'        <div class="tse-content">'+
'          <div id="ember1087" class="ember-view"><!----></div>'+
'        </div>'+
'      </div>'+
'    </div>'+
'  </div>'+
'</div>';
})();

我不是我想要使用的网站的所有者。我想注入脚本,它可以定位第一个HTML字符串并用我自己的HTML字符串替换它。(已经有插件可以将JS注入网站,只是需要帮助编写代码)

提问于
用户回答回答于

你在调用document.getElementById("chat").innerHTML#chat在DOM上不存在。这就是为什么它不起作用的原因。你需要访问并将HTML添加到已经在DOM中呈现的元素中。

在下面的代码中,我将替换.parent:

const htmlString = `
  <div class="content twitter-container twitter-tab active" id="panel2-3" aria-hidden="false">
    <div id="ember1123" class="ember-view tse-scrollable">
      <div class="tse-scrollbar" style="display: none;">
        <div class="drag-handle" style="top: 2px; height: 81px;"></div>
      </div>
    <div class="tse-scroll-content" style="width: 374px; height: 836px;">
      <div class="chat">
        <iframe id="chat_embed" src="https://www.twitch.tv/embed/?????????/chat?darkpopout" scrolling="no" width="374" height="836" frameborder="0">&amp;amp;amp;amp;lt;br /&amp;amp;amp;amp;gt;
        </iframe>
      </div>
    </div>
  </div>
`;

document.querySelector('.parent').innerHTML = htmlString;
<div class="parent">
  <div class="content twitter-container twitter-tab active" id="panel2-3">
    <div id="ember1069" class="ember-view tse-scrollable">
      <div class="tse-scrollbar" style="display: block;">
        <div class="drag-handle" style="top: 2px; height: 81px;"></div>
      </div>
      <div class="tse-scroll-content" style="width: 374px; height: 836px;">
        <div class="tse-content">
          <div id="ember1087" class="ember-view"><!----></div>
        </div>
      </div>
    </div>
  </div>
</div>

扫码关注云+社区

领取腾讯云代金券