使用JQuery创建链接的最佳方法？

Question

我们使用jqGrid自定义格式化程序在JQuery网格中输出链接.我们只是使用String操作构建链接a:

var s = "<a title=\"Blah\" href=\"javascript:BlahFunc('" + options.rowId + "')\">This is blah<a>";

有没有更"聪明"的方法来使用JQuery创建链接(和其他表单元素)？

Answer 1

我发现最好的

$('<a>',{
    text: 'This is blah',
    title: 'Blah',
    href: '#',
    click: function(){ BlahFunc( options.rowId );return false;}
}).appendTo('body');

活生生的例子在http://www.jsfiddle.net/gaby/RhWgf/

我用附加的处理程序替换了内联javascript

关于jQuery()的文档引用

jQuery(html,props)

html定义单个独立 HTML元素的字符串 (例如<div/> 或<div></div>).
props要在新创建的元素上调用的属性,事件和方法的映射.

更新

如果你想要链接的实际文本,你应该将它包装在div中并返回.html()它.

(或者:您可以使用访问.outerHTML原始元素的属性)

完整的例子在http://www.jsfiddle.net/gaby/RhWgf/1/(删除单击处理程序,因为它会迷失在一个字符串的版本,并用它替代live为目标的特定种类的链接处理)

Answer 2

正如Steven Xu正确提到的,插入HTML字符串比操作DOM更快,这就是为什么我建议使用字符串操作而不是jQuery创建元素.

你只需要改变这个:

var s = "<a title=\"Blah\" href=\"javascript:BlahFunc('" + options.rowId +
        "')\">This is blah<a>";

对此:

var s = "<a title=\"Blah\" href=\"javascript:BlahFunc('" + options.rowId +
        "')\">This is blah</a>";

(在字符串末尾<a>用close 标签</a>).

该字符串操作比DOM操作(见快得多这个为例).此外,如果您尝试在大型HTML代码中插入DOM片段,则差异会更大.DOM DocumentFragments的使用可以略微提高性能,但字符串连接的使用是最快的方式.

所有其他答案在没有您使用它的上下文(jqGrid自定义格式化程序)的知识的情况下写下了他的答案.我试着解释为什么它在你的情况下很重要.

由于性能优势,jqGrid首先为网格构建HTML代码片段作为字符串数组,然后根据字符串数组构建一个字符串.join(''),并将结果仅插入到表体中.(我想你使用的是gridview:几乎总是推荐的真正的 jqGrid选项).所述的jqGrid自定义格式是电网(表)主体的建筑过程中使用的jqGrid的回调函数.自定义格式化程序必须将HTML代码片段作为结果返回字符串.该字符串将与构建网格主体(表)的其他字符串连接在一起.

因此,如果您将当前代码从纯字符串操作更改为jQuery DOM操作并将结果转换为字符串(需要作为自定义格式的结果返回),那么您的代码将运行缓慢,您将没有其他优势*.

使用字符串操作的唯一真正缺点是验证您构建的代码的问题.例如,没有close标签的代码的使用</a>是一个潜在的问题,你可以拥有.在大多数情况下,问题将在插入DOM片段期间得到解决,但有时您可能会遇到实际问题.所以你应该仔细测试你插入的代码.

还有一个备注:如果你想跟着不显眼的JavaScript的风格可以用"#"作为价值href属性和相应的绑定click事件的内部gridComplete或loadComplete事件处理程序.如果您在执行此操作时遇到问题,可以打开一个新问题,我将尝试为您编写相应的代码示例.

注意:我认为最好的实现方式是使用onCellSelect或beforeSelectRow代替绑定click事件到<a>列中的每个元素.我建议您阅读以下答案以获取详细信息:这一个,另一个和另一个旧答案.

Answer 3

jQuery('<a>').attr('href', 'url').text('blah')

将创建一个jquery对象,然后你可以将它添加到dom中.append.

Answer 4

我的首选方式是:

$("<a>", {
  title: "Blah",
  href: "javascript:BlahFunc('" + options.rowId + "')"
  }).append( "This is blah" );

这篇文章有很好的信息:http:
//marcgrabanski.com/articles/building-html-in-jquery-and-javascript