无需在javascript中转义innerHTML字符？

Question

我不应该逃避“markup4”中的双引号吗？ 令我惊讶的是这个简单的作品。 如果我用它没有的东西替换它们。

<script type="text/javascript">

    function test3(){
    document.getElementById('div21').innerHTML += '<div class = "markup4"><br>blablablabla1.<br><br></div><div class = "markup3"><br>blablabla2.<br><br></div>';
    }

</script>

Answer 1

这些工作无需逃避：

innerHTML = "<div class = 'markup4'>";
innerHTML = '<div class = "markup4">';

注意：当"在外面使用时， '在内部正常工作。（和相反的）

这些需要逃脱：

innerHTML = '<div class = \'markup4\'>';
innerHTML = "<div class = \"markup4\">";

注意：当您在内部和内部使用双引号时，内部的"需要通过\\来转义。”（单引号相同）

这些会打破：

innerHTML = "<div class = "markup4">";
innerHTML = '<div class = 'markup4'>';

Answer 2

首先，字符串被解析为内部javascript字符串表示，因此您首先需要转义为javascript字符串文字。 结果将与您已有的结果相同 - 因此无需进行任何修改。

现在你有了

<div class = "markup4"><br>blablablabla1.<br><br></div><div class = "markup3"><br>blablabla2.<br><br></div>

内部在javascript内存中。

在此之后，就像你将它写成普通的HTML一样，当然，如果你使用" 不起作用。

存储经过2种不同解释的字符串会非常复杂，这就是为什么你不应该这样做，而是使用模板引擎，将模板存储在页面上的其他文件或自定义脚本元素中，这样你就可以只关注关于html的解释。

Answer 3

当您想在数据中包含引号时，应使用escape，

例如：他说，“请用这个！” 应该逃脱：

他说，“请用这个！”。

否则他们没有任何麻烦。

希望我已经澄清了。

Answer 4

不要忘记浏览器根据你给出的内容渲染自己的innerHtml，如果嵌套innerHtml代码会导致问题。

我找到了' 和" 代码在这里有用。