如何使用JS将整个HTML字符串替换为另一个HTML字符串？
如何使用JS将整个HTML字符串替换为另一个HTML字符串？
提问于 2018-08-06 05:04:20
我想问一下如何用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;lt;br /&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;lt;br /&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注入网站，只是需要帮助编写代码)
回答 1
Stack Overflow用户
发布于 2018-08-06 14:15:45
你在调用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;lt;br /&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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100001946
复制相关文章
相似问题