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

Question

我们使用 jqGrid 自定义格式化程序在 JQuery 网格中输出链接。我们只是使用字符串操作来构造链接：

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

有没有更“聪明”的方法来使用 JQuery 创建链接（和其他表单元素）？

Answer 1

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

将创建一个 jquery 对象，然后您可以使用 .append 将其添加到 dom。

Answer 2

我的首选方式是这样的：

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

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

Answer 3

一般来说，插入一个 HTML 字符串更快，并且多次 DOM 注入和 DOM 操作，这就是这个 jQuery DOM 操作的意义所在。如果您想插入其中的 500 个，就性能而言，最好的选择是准备 HTML 字符串，然后附加 HTML。

但出于您的简单目的，您当前的选择将非常适合您。为了更聪明，您可以在新元素上使用 jQuery 的 DOM 操作库。下面的例子应该是不言自明的，但如果我不清楚具体是什么，请留下评论，我会帮助你。

var toBeAdded = [
  { title: "one", row: 1, content: "ONE" },
  { title: "two", row: 2, content: "TWO" },
  { title: "three", row: 3, content: "THREE" }
];

var s = toBeAdded.length;
for(i=0;i<s;i++) {
  var a = $('<a>');
  a.attr('title', toBeAdded[i].title);
  a.attr('rel', toBeAdded[i].row);
  a.text(toBeAdded[i].content);
  a.addClass('blah_class');
  a.appendTo($('body'));
}

然后在你的通用脚本中：

$('a.blah_class').live('click', function(){
  var rel = $(this).attr('rel');
  BlahFunc(rel);
});

Answer 4

我觉得最好的人

$('<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>)。
道具属性、事件和 调用新创建的方法 元素。

---

更新

如果您想要链接的实际文本，您应该将其包装在一个 div 中并返回其中的 .html()。

（或者：您可以使用访问原始元素的.outerHTML 属性）

完整示例 at http://www.jsfiddle.net/gaby/RhWgf/1/（删除了单击处理程序，因为它会在字符串版本中丢失，并将其替换为针对特定类型的 live 处理程序链接)

Answer 5

正如 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>标签，在字符串末尾加上</a>）。

字符串操作比 DOM 操作快得多（例如，参见 this）。此外，如果您尝试在大型 HTML 代码中间插入 DOM 片段，差异会更大。使用DOM DocumentFragments可以稍微提升性能，但是使用字符串拼接是最快的方式。

所有其他答案都在不了解您使用它的上下文（jqGrid 自定义格式化程序）的情况下写了他的答案。我试图解释为什么它在你的情况下很重要。

由于性能优势，jqGrid首先为网格构建HTML代码片段作为字符串数组，然后从字符串数组中针对.join('')构建一个字符串，并将结果插入到表体的所有末尾只要。 （我想你使用gridview:true jqGrid 选项，几乎总是推荐）。 jqGrid custom formatter 是 jqGrid 在构建网格（表）体期间使用的回调函数。自定义格式化程序必须将 HTML 代码片段作为 string 作为结果返回。该字符串将与构建网格（表格）主体的其他字符串连接。

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

使用字符串操作的唯一真正缺点是验证您构建的代码的问题。例如，使用没有关闭标签</a> 的代码是您可能遇到的潜在问题。在大多数情况下，问题会在插入 DOM 片段的过程中得到解决，但有时您会收到真正的问题。所以你应该非常仔细地测试你插入的代码。

再说明：如果要关注unobtrusive JavaScript style，可以使用“#”作为href属性的值，并在gridComplete或loadComplete事件处理程序中绑定对应的click事件。如果您在执行时遇到问题，您可以打开一个新问题，我会尝试为您编写相应的代码示例。

注意：我认为最好的实现方式是使用onCellSelect 或beforeSelectRow，而不是将click 事件绑定到列中的每个<a> 元素。我建议阅读以下答案以了解详细信息：this one、another one 和 one more old answer。

Answer 6

这对我有帮助，从按钮获取链接以获取新链接

var $jsClonedButtonLinkContainer = $('.js-cloned-button-link-container');
$jsClonedButtonLinkContainer.each(function() {
    $('<a>', {
      href: $(this).find('a.nectar-button').attr('href'),
      'class': 'flip-box__cloned-button-link'
    }).prependTo($(this).find('.flip-box-back'));
  });