Question

我正在创建内容编辑器，作为其中的一部分，我需要检索反应容器中包含的任何元素的内部HTML（即在具有数据重新连接的范围内保存）。 / p>

我正在存储从DOM检索到的字符串，并将它们与一批新字符串进行比较以进行替换，但是当尝试获取嵌套内容的innerHTML时，我发现正在生成其他不需要的标记。

作为示例，我将以下字符串放入retrieveInner函数作为参数'oldValue'：

var old_value = "<span data-reactid=\".1qw3srjo8hs.1.3.$2.$2.0.$0.$0.$0.$0.$1.$1.$2.0\"><div class=\"case-study-box float-left margin-top-20\">VIEW OUR NUMBERS<span class=\"glyphicon glyphicon-chevron-right margin-left-5\"></span></div></span>"

var new_value = retrieveInner(old_value);

console.log("returned value", new_value);

function retrieveInner(oldValue) {
  let container = document.createElement('div');
  container.innerHTML = oldValue;

  if (container.children[0]) {
    oldValue = container.children[0].innerHTML; // <- unwanted markup generated here
    console.log('old value', oldValue);
  }
  return oldValue;
}

现在，如果我将retrieveInner函数编码到我的浏览器中并将oldValue字符串放入其中，我会得到以下返回值，这正是我想要的：

"<div class="case-study-box float-left margin-top-20">VIEW OUR NUMBERS<span class="glyphicon glyphicon-chevron-right margin-left-5"></span></div>"

在实践中，我得到了以下返回值，如控制台日志所示：

"<div class="\&quot;case-study-box" float-left="" margin-top-20\"="">VIEW OUR NUMBERS<span class="\&quot;glyphicon" glyphicon-chevron-right="" margin-left-5\"=""></span></div>"

完全不知道为什么会发生这种情况以及为什么我的控制台日志与我在开发控制台（在Chrome上）上尝试的内容之间存在脱节。任何人都可以提出任何见解并建议我如何获得所需的字符串返回？

由于

Answer 1

好像你的第一个className（例如case-study-box）被引号包围，浏览器试图修复它。

浏览器在检索子元素的innerHTML时生成不需要的标记

1 个答案: