我正在尝试使用 ID 'myElement' 填充 DOM 元素。我填充的内容是文本和 HTML 元素的混合。
假设以下是我希望在我的 DOM 元素中填充的内容。
var x = "<b>Success</b> is a matter of hard work &luck";
我尝试如下使用innerHTML,
document.getElementById("myElement").innerHTML=x;
这导致我的句子中的最后一个词被砍掉了。显然,问题是由于最后一个单词中存在“&”字符。我玩弄了'&'和innerHTML,以下是我的观察。
- 如果内容的最后一个单词少于 10 个字符,并且其中包含 '&' 字符,innerHTML 会在 '&' 处截断句子。
- 这个问题在 Firefox 中不会发生。
- 如果我使用innerText,最后一个词是完整的,但是作为内容一部分的所有HTML标签都变成了纯文本。
我尝试通过 jQuery 的 #html 方法填充,
$("#myElement").html(x);
这种方法解决了 IE 中的问题,但不能解决chrome中的问题。
如何插入最后一个单词包含“&”的 HTML 内容,而不会在所有浏览器中被截断?
更新: 1. 我尝试对要插入 DOM 的内容进行 html 编码。当我对内容进行编码时,作为内容一部分的 html 标签变为纯字符串。
对于上述内容,我希望结果呈现为,
成功是靠努力和运气
但是当我对渲染页面中实际得到的内容进行编码时,
<b>Success</b> is a matter of hard work &luck