php - php：将任意html元素的数据存储在html中以将此数据传递给HTML页面上元素的innerHTML的最佳方法？

Question

例如我在 php 中有这样的字符串：

$str='<img title="title of image" src="../somepic.gif" alt="some pic image" class="someclass" style="somestiles" onload="alert(this)" />';
//it can be anything: '<br>123<P><script>' or '123</script>' (even with newlines \r and \n and other special symbols)

我需要它只在点击后显示：

<?php 
echo'<div>
  <textarea onclick="this.parentNode.innerHTML=this.value">',htmlspecialchars($str),'</textarea>
</div>'; 
?>

正如我们所看到的，js 将 texarea 元素替换为存储在 $str 变量中并作为文本放置在“<textarea>”值中的内容。

我需要知道如何在不使用 textarea 元素为 JS 存储数据的情况下实现这一点。（现在我正在使用隐藏的文本区域，但我怀疑这种方法是否正确）

Answer 1

只需将 HTML 存储为（正确转义的）字符串：

var foo = document.getElementById("foo"),
    html = "<img src='http://placekitten.com/100/100' onclick='alert(1);' />";

if (foo.addEventListener) {
    foo.addEventListener("click", setInner, false);
} else if(foo.attachEvent) {
    foo.attachEvent("onclick", setInner);
}

function setInner () {
    foo.innerHTML = html;
}​

演示：http: //jsfiddle.net/UAL8P/