javascript - 编辑前后元素的状态(使用 contentEditable)

Question

我想捕捉用户编辑后 div 中的元素如何变化(因为内容是 contentEditable)，因此有一个如下所示的页面:

before_html = $("#example_div").children();
$("#differences_button").on("click",function(){
  after_html = $("#example_div").children();
  console.dir(before_html[0].innerText);
  console.dir(after_html[0].innerText);  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="example_div" contentEditable><span id='example_span'>How it starts</span></div>
<button type="button" id="differences_button">Show differences</button>

然而，正如 console.dirs 所示，“before_html”不存储元素的原始结构，而是在再次运行时显示它的最新结构。

有没有办法在这个例子中显示的那种变化之前存储结构？

我试过 JSON.parse(JSON.stringify(before_html)) 来存储一些不会更新的东西，这在尝试存储一个你不想稍后更新的 javascript 变量时经常有效，但这无法存储此处应用时的内容。

Answer 1

问题是您在点击后访问 before_html[0].innerText 和 after_html[0].innerText。因此，在进行所有更改后对它们进行评估。

相反，您可以保存 before_html(在附加事件处理程序之前)，并使其包含 innerHtml 或 innerText，然后在点击处理程序期间与新值进行比较。

before_text = $("#example_div").text();
$("#differences_button").on("click",function(){
  after_text = $("#example_div").text();
  console.dir(before_text);
  console.dir(after_text);  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="example_div" contentEditable><span id='example_span'>How it starts</span></div>
<button type="button" id="differences_button">Show differences</button>

---

_{请注意，我已将变量名称从 before_html 更改为 before_text，因为它不包含 HTML。如果您愿意，可以通过调用 before_text = $("#example_div").html(); 使其包含 HTML。}