jQuery DOM元素创建vs innerHTML

在回答我的一个问题时， cletus提到在jQuery中创建元素时最好使用direct DOM element creation ，而不是innerHTML 。 我试过谷歌搜索它，但我无法找到一个比较好的文章。

我已经提供了这个代码作为示例，我想知道是否有人可以帮我在直接DOM元素创建表单中重写它，希望我之后也能学到它的不同之处。

 var img = $(this); img.append('
'+ img.attr('title')+'
'); 

非常感谢。

Answer 1

是的，避免HTML字符串吊索。 你给自己的bug和潜在的跨站点脚本安全漏洞。 例如：

 '' 

如果父href中的URL包含此HTML上下文中特殊的字符，例如< ， "或者& ？最好，您将获得可能使浏览器跳闸的无效标记;最糟糕的是，如果URL来自用户提交，一个安全问题。

（好的， <和"不太可能出现在URL中，但很可能确实存在。您在文本内容中添加的title可能更容易受到攻击。）

这是一个越来越大的问题。 就像我们开始处理修复来自服务器端模板的HTML注入错误（例如，PHP用户忘记了htmlspecialchars() ）一样，我们现在正在引入大量新客户端 XSS使用innerHTML和jQuery的html()的html()攻击。 避免。

您可以手动转义要插入HTML的文本：

 function encodeHTML(s) { return s.replace(/&/g, '&').replace(/' 

但实际上，你最好使用直接的DOM风格的属性和方法，因为它们不涉及HTML解析，所以不需要任何转义。 它们被称为DOM风格，因为这是原始DOM Level 1 HTMLfunction的工作方式（在innerHTML之前存在它的丑陋头脑之前存在）：

 var a= document.createElement('a'); a.href= this.parentNode.href; a.appendChild(document.createTextNode(this.title)); 

在jQuery中，您使用attr()和text()来执行相同的操作：

 var a= $(''); a.attr('href', $(this).parent().attr('href'); a.text($(this).attr('title')); 

在jQuery 1.4中，您可以使用元素创建快捷方式最方便地完成：

 $(this).append( $('
').append( $('', { href: $(this).parent().attr('href'), text: $(this).attr('title') }) ) ); 

这仍然看起来有点值得怀疑，你得到href的父母是什么？ 在链接中放置

或其他链接是无效的。

Answer 2

这是你在jQuery中创建元素的方法：

 var myDiv = $('
'); 

然后你可以使用myDiv做各种很酷的事情。

这是用你的例子：

 var img = $(this); var myP = $('
'); var myA = $(''); myA.attr("href",img.parent().attr('href')); myA.html(img.attr('title')); myP.append(myA); this.append(myP); 

它有点冗长，但是。