例如:
<script type="text/javascript">
function fun()
{
var str = document.getElementById("h").value;
document.getElementById("s").innerHTML = str;
}
</script>
<?php
$str = "<html>some other text";
echo '<input type="hidden" value="'.htmlspecialchars($str).'" id="h"/>';
echo '<input type="button" onclick="fun()" value="click"/>';
echo '<span id="s">change here</span>';
?>
在上面的示例中,一些 html 实体(从 PHP 的 htmlspecialchars() 函数获得)和一些纯文本一起存储在隐藏字段中。我想当用户单击按钮时在 span 元素中显示此内容。但我的观察是,跨度中仅显示纯文本,忽略应该类似于 的 html 实体部分。但如果我在 javascript 中使用alert(str),它会根据需要显示。我想知道为什么会发生这种情况。在上述代码的上下文中,HTML 实体是否真的无法与innerHTML一起使用?
最佳答案
我想我已经弄清楚了这个问题。去掉 PHP,如果 $str
,您的 HTML 可能如下所示包含<strong>boo</strong>
等等htmlspecialchars
输出<strong>boo</strong>
:
some other text
<input type="hidden" value="<strong>boo</strong>" id="h" />
<input type="button" onclick="fun()" value="click" />
<span id="s">change here</span>
稍后,分配给跨度的 innerHTML
的内容是 <strong>boo</strong>
(没有实体)。你看到boo
以粗体显示,如下所示:
function fun() {
var str = document.getElementById("h").value;
var t = document.createTextNode(str);
document.getElementById("s").innerHTML = str;
}
some other text
<input type="hidden" value="<strong>boo</strong>" id="h" />
<input type="button" onclick="fun()" value="click" />
<span id="s">change here</span>
发生这种情况是因为属性中的文本是 HTML,而人们往往会忘记这一点。所以value
您输入的内容是<strong>boo</strong>
(没有实体),因为实体已经被解释(当解析 HTML 时)。
当您将其分配给您的范围的 innerHTML
时,您要求该字符串第二次被解释为 HTML,最终会创建一个 strong
元素为 boo
就在其中。
如果您想将该文本添加到范围而不重新解释它,请使用文本节点:
var t = document.createTextNode(str);
var span = document.getElementById("s");
span.innerHTML = ""; // Clear old content
span.appendChild(t); // Add new
示例:
function fun() {
var str = document.getElementById("h").value;
var t = document.createTextNode(str);
var span = document.getElementById("s");
span.innerHTML = ""; // Clear old content
span.appendChild(t); // Add new
}
some other text
<input type="hidden" value="<strong>boo</strong>" id="h" />
<input type="button" onclick="fun()" value="click" />
<span id="s">change here</span>
关于javascript - HTML 实体在 javascript 的innerHTML 中不起作用吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33953799/