javascript - 操作 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

或者，我是否必须注入(inject) <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>