在不修改实际dom状态的情况下操作dom元素

Question

我了解，当我们这样做时：

var el = $("#el")

我们实质上是在参考实际的DOM元素。 然后执行$("#el").text("new text")将导致该元素（在DOM中）的文本被更改。

我的问题是，如果我想将此元素用作模板怎么办？

var new_element = $("#el").text("new element") // just this element manipulation
$("ul").prepend( new_element ); // actual dom manipulation

或者，是否必须将<div id="newObject"></div>注入DOM世界，获取其引用然后进行操作？

编辑：

$（“＃el”）。clone（）是实现此目的的方法

Answer 1

不，您不需要将其放入DOM。 您可以让jQuery创建元素并引用它。 克隆元素很重要。 如果您不这样做，它只会更改原始元素，并且由于元素不能一次位于两个位置，因此它只会移动。

 const templateLi = $('<li class="foo"></li>') function addLi(text) { const li = templateLi.clone().text(text) $("ul").append(li) } addLi("hello") addLi("bacon") 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> </ul>