Chrome怎么阻止JS删除DOM内容？

Question

<div class="epub-main">
<div id="epub-chapter-01" class="epub-chapter">1234567</div>
<div id="epub-chapter-02" class="epub-chapter">I LOVE PEKING</div>
<div id="epub-chapter-03" class="epub-chapter">HONGKONG</div>
<div id="epub-chapter-04" class="epub-chapter">WHO R U</div>
<div id="epub-chapter-05" class="epub-chapter">FINE 3Q AND U</div>
</div>

页面一直往下拉，<div class="epub-main">里会不断生成新的<div id="epub-chapter-?" class="epub-chapter">新内容</div>，每下拉超过2个<div id="epub-chapter-？" class="epub-chapter"></div>后就会删除前面生成最上面的1个，比如消除了<div id="epub-chapter-01" class="epub-chapter">1234567</div>，以此类推，有没有什么方法阻止JS自动删除<div class="epub-main">下边的生成的元素呢？

Answer 1

两个参考方法，抛砖引玉。

1. 往“epub-main”内插入足够多的无用子节点，供删除，如

   <div class="epub-main">
   +<div id="epub-chapter-99" class="epub-chapter" style="display:none">无用</div>
   +<div id="epub-chapter-98" class="epub-chapter" style="display:none">无用</div>
   +...
   <div id="epub-chapter-01" class="epub-chapter">1234567</div>
   </div>

2. 劫持节点 removeChild 方法，忽略对象 "epub-chapter-NN"。

不管使用哪种方法，你都需要往页面插入自己的 javascript 代码，这可以通过 chrome 插件，或 greasemonkey 脚本，等方式实现。

Answer 2

实现不了。那么考虑考虑其他的手段，比如说clone一份。然后去重之类的操作。

MutationObserver 能监听改变

Answer 3

自己写一段代码
在 epub-main 上面插入一个 epub-main-copy
把 epub-main 下面插入的 epub-chapter 都移到 epub-main-copy

Answer 4

删除行为是在代码里吧，找到相关的代码，去掉就好了