Question

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

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

var img = $(this); img.append('<a href="'+img.parent().attr('href')+'">'+ img.attr('title')+'</a>');

非常感谢。

Answer 1

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

'<a href="'+img.parent().attr('href')+'">'

如果父{†}}中的网址包含此HTML上下文中特殊的字符，例如href，<或"，该怎么办？充其量你会得到无效的标记，可能会使浏览器瘫痪;在最坏的情况下，如果URL来自用户提交，则存在安全问题。

（好的，&和<不太可能出现在网址中，但"很可能确实存在。&您正在放入文字内容可能更容易受到伤害。）

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

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

html()

但实际上，你最好使用直接的DOM风格的属性和方法，因为它们不涉及HTML解析，所以不需要任何转义。它们被称为DOM风格，因为这是原始DOM Level 1 HTML功能的工作方式（在function encodeHTML(s) { return s.replace(/&/g, '&').replace(/</g, '<').replace(/"/g, '"'); } '<a href="'+encodeHTML(img.parent().attr('href'))+'">'之前存在于其丑陋的头部之前）：

innerHTML

在jQuery中，您使用var a= document.createElement('a'); a.href= this.parentNode.href; a.appendChild(document.createTextNode(this.title));和attr()执行相同操作：

text()

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

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

这仍然有点值得怀疑，你从$(this).append( $('').append( $('<a></a>', { href: $(this).parent().attr('href'), text: $(this).attr('title') }) ) );得到的父母是什么？在链接中放置href或其他链接无效。

Answer 2

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

var myDiv = $('<div class="my-class"></div>');

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

这是使用你的例子：

var img = $(this);
var myP = $('<p class="cap"></p>');
var myA = $('<a></a>');
myA.attr("href",img.parent().attr('href'));
myA.html(img.attr('title'));
myP.append(myA);
this.append(myP);

这有点冗长，但是。是的。

jQuery DOM元素创建vs innerHTML

2 个答案: