'整洁'的方式在jQuery中加倍追加

Question

我需要在jQuery中执行某个操作，我想知道如何更好地执行此操作，可以这么说。

我们说我有以下HTML：

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

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

现在我想将来自原点的a-tag附加到ul中。要做到这一点，我要做：

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

然而，如果我这样做，我得到[对象对象]而不是链接，因为我猜测我试图在1行（字符串和对象）中做两种类型。所以我通常把它分成两行：

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

然而，我觉得这种方法很可怕。在不使用追加两次的情况下，在1行中执行此操作的正确方法是什么？

（P.S。我问这个建议是为了更清楚地做到这一点，我强迫在这些情况下使用jQuery（或javascript ofcourse），并且无法访问HTML / CSS文件）

Answer 1

您可以将LI创建为jQuery元素

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

Answer 2

您可以获取anchor元素的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'));