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

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

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

var s=“这是废话”；

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

JQuery（'''.attr（'href'，'url'）.text（'blah'））
jQuery('<a>').attr('href', 'url').text('blah')

---

将创建一个jquery对象，然后您可以使用

将其添加到dom中。append

我的首选方法是：

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

---

$（“
一般来说，插入HTML字符串更快，并且需要多次DOM注入和DOM操作，这就是这个jQuery DOM操作的含义。如果您想插入其中的500个，最好的选择是准备HTML字符串，然后追加HTML

但出于简单的目的，您当前的选项将非常适合您。为了更聪明，您可以在新元素上使用jQuery的DOM操纵库。下面的示例应该是不言自明的，但是如果我还不清楚某个特定的are，请留下评论，我会帮您解决

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>',{
    text: 'This is blah',
    title: 'Blah',
    href: '#',
    click: function(){ BlahFunc( options.rowId );return false;}
}).appendTo('body');

$（'

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

从文件中引用关于

jQuery（html，道具）

html定义单个，
独立，HTML元素（例如

或
）。

道具属性、事件和属性的地图
方法调用新创建的
元素


更新

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

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

完整示例at（删除了click处理程序，因为它会在字符串版本中丢失，并将其替换为针对特定链接类型的
live
处理程序）
正如Steven Xu正确地提到的，插入HTML字符串比操作DOM快，这就是为什么我建议使用字符串操作而不是jQuery创建元素的原因

您只需更改以下内容：

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

var s=”“；

（关闭<代码>）。此外，如果尝试在一个大的HTML代码中间插入一个DOM片段，差异会更大。使用CAN可以稍微提高性能，但是字符串连接的使用是最快的方式。

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

由于性能优势，jqGrid首先为网格构建HTML代码片段作为字符串数组，然后从字符串数组中构建一个关于
.join（“”）
的字符串，并将结果仅插入到表体的末尾。（我假设您使用几乎总是推荐的jqGrid选项）。是jqGrid在构建网格（表）主体期间使用的回调函数。自定义格式化程序必须返回HTML代码片段作为结果字符串。该字符串将与构建网格（表）主体的其他字符串连接

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

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

还有一句话：如果你想跟随，你可以使用“#“作为
href
属性的值，并绑定相应的
单击
gridComplete
或
loadComplete
事件处理程序中的
事件。如果您在执行此操作时遇到问题，可以打开一个新问题，我将尝试为您编写相应的代码示例

注意：我认为最好的实现方式是使用
onCellSelect
或
beforeselectionRow
而不是将
单击
事件绑定到每个
，并且。
这对我有帮助，从按钮获取新链接

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'));
  });

var$jsClonedButtonLinkContainer=$（'.js克隆按钮链接容器'）；
$jsClonedButtonLinkContainer.each（函数（）{
$('', {
href:$（this.find（'a.nectar-button'）.attr（'href'），
'class'：'flip-box\uuu-button-link'
}).prependTo（$（this）.find（'.flip box back'）；
});
打得好，我刚写完这篇文章，但我总是忘了你确实需要括号。有没有办法只返回原始HTML？比如
jQuery（“”）.attr（'href'，url'）.text（'blah'）.HTML（）
？我唯一能做的就是把这个附加到另一个div，然后得到它的HTML。比如：
jQuery（“”）。append（jQuery（“”）.attr（'href'，'url'）.text（'blah'））.html（）
.html将只获取当前元素中的内容，因此我必须将其包装到其他内容中。但是，您的问题没有问题。我以前使用过jQGrid，我就是这样做的。“html字符串的插入速度与DOM一样快。”-当然，这也是确保您有大量XSS问题的最佳方法。@oreoshake：对不起，我不确定我是否正确理解您。我回答的问题是关于jqGrid自定义格式设置程序的使用。jqGrid使用回调来构造特定列中单元格的HTML内容。因此自定义格式设置程序
var s = "<a title=\"Blah\" href=\"javascript:BlahFunc('" + options.rowId +
        "')\">This is blah</a>";

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'));
  });