javascript - 如何正确使用html脚本模板

Question

我必须自动生成一些 li 元素，以及我通过在循环内返回文本的函数来执行此操作的方式，如下所示:

function getLi(data) {
   return '<li>' + data + '</li>';
}

然后我找到了一种更好的方法，在 div 中编写 html:

<div style="display:none;" id="Template">
   <li id="value"></li>
</div>

然后我会更改 id 和值以获取 html 并将元素重置为原始状态:

var element = $("#value");
element.html(data);
element.attr('id', getNewId());
var htmlText = $("#Template").html();
element.html('');
element.attr('id', 'value');
return htmlText;

然后我正在阅读脚本模板

我认为这可能是更好的方法，
然而，应用前面的代码不起作用，因为根据this article，内部元素不存在。

那么我该如何应用它呢？

编辑:我放入 ul 标签内，我使用此方法动态获取项目

编辑2:

<li>
   <a href="#" >
   <span>
   <span>
some text
   </span>
   </span>
</li>

这不一定是我所拥有的，而是一路上的东西

编辑3:我的 ul 不存在 orgialy 它是动态生成的我坚持认为这不是重复的我想知道如何使用带有一些动态变量的模板

Answer 1

您可以按照以下方式进行操作。它干净、可重用且可读。

//A function that would return an item object
function buildItem(content, id) {

    return $("<li/>", {
        id: id,
        html: content
    });
}

在循环中，您可以执行以下操作。不要在循环内附加每个 LI，因为 DOM 操作的成本很高。因此，生成每个项目并堆叠一个对象，如下所示。

var $items = $();
// loop begin
var contents = ['<a href="#"><span><span>', data, '</span></span></a>'].join('');
var $item = buildItem(contents, getNewId());
$items.add($item);
// loop end

就在循环之外。将这些生成的 LI 添加到所需的 UL，如下所示。

$("ul").append($items);

这就是我会做的，我相信还有很多更好的方法。希望有帮助。