gpt4 book ai didi

javascript - 操作 dom 元素而不修改实际 dom 状态

转载 作者:行者123 更新时间:2023-11-28 16:59:32 26 4
gpt4 key购买 nike

我知道当我们这样做时:

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() 就是这样做的方法

最佳答案

不,您不需要将其放入 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>

关于javascript - 操作 dom 元素而不修改实际 dom 状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57962302/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com