'neat' 在 jQuery 中加倍追加的方法

Question

我需要在 jQuery 中执行某项操作，我想知道如何才能更多地执行此操作 'neatly'，可以这么说。

假设我有以下 HTML：

<div id="origin">
  <a href="test" title="testtoo">Testlink</a>
</div>

<div id="target">
  <ul></ul>
</div>

现在我想从 li 中的 origin 附加 a-tag 到 ul。为此，我会这样做：

$('#target ul').append('<li>'+$('#origin a')+'</li>');

但是，如果我那样做，我得到的是 [Object object] 而不是链接，因为我猜我正在尝试在 1 行中执行 2 种类型（字符串和对象）。所以我通常把它分成两行：

$('#target ul').append('<li></li>');
$('#target ul li').append($('#origin a'));

但是，我觉得这个方法很糟糕。在不使用 append 两次的情况下，在 1 行中执行此操作的正确方法是什么？

(P.S。我提出这个建议是为了更巧妙地做到这一点，在这些情况下我被迫使用 jQuery（或 javascript 当然），并且没有访问权限到 HTML/CSS 个文件）

Answer 1

您可以将 LI 创建为 jQuery 元素

$('#target ul').append( 
    $('<li />', { html : $('#origin a') })
);

Answer 2

你可以获取锚元素的outerHtml并在附加时与li元素连接：

 $('#target ul').append('<li>'+$('#origin a')[0].outerHTML+'</li>');

Answer 3

我会做的方式是我以前做的方式。不短但可读

$('<li>')
    .html($('#origin a')
    .appendTo($('#target ul'));

你可以把它压缩成一行，但我喜欢把它展开，这样所有的东西都摆在我面前，并且很容易阅读。压缩后看起来像这样

$('<li>').html($('#origin a').appendTo($('#target ul'));

'neat' way to double append in jQuery