在将DOM元素添加到文档之前操作它们

Question

我在想是否有一种干净的实现方式可以在将元素附加到DOM之前获取它们。

例如（使用jQuery）：

var html = "<div class = 'test'><div class = 'innertest'>Hello!</div></div>";

var innerDiv = $(html).find('.innertest');

---

我觉得这似乎不可能，但我想看看是否有任何实现可以做到这一点-因为这对于类和分离来说非常好。

编辑：我想知道这是否可行。我所说的“干净”是指它没有使用像字符串替换或者其他什么鬼畜操作。 这不是一个我制造它们的情况。如果我能制造它们，我会在需要的时候创建变量。我有这样一个HTML字符串，我想在将其附加到我的页面之前查找并操作其中的元素。

- Matt

Answer 1

这就是我最终的做法：

var test = $("<div/>");
test.append(html);

test.find(".innertest");

// When I'm ready to append it..

$('#container').append(test);

我不得不修改我的HTML代码，但最终这种方法非常简洁。感谢您提供的所有建议！

- Matt

Answer 2

var new_element = $(html);
new_element.find('.innertest').doStuffToIt(); //last one isn't an actual method

// and when you're done...

new_element.appendTo('#container');

您不需要修改HTML流，因为没有必要添加额外的div。

我也在寻找同样的解决方案（这就是我来到这里的原因），在阅读了您得到的解决方案后，我想出了这个解决方案。对于我所需的功能，它非常有效。

- Stefan Matei

---

注意：如果new_element实际上是一组div（比如说，从动态渲染模板中得到的），那么我们需要使用.filter而不是.find。这就是时间去哪儿了。 - Manav

Answer 3

你看过DOM DocumentFragments吗？

- Kevin Hakanson

Answer 4

var test = $('<div>').addClass('test').append(  

    $('<div>').addClass('innertest').text('Hello!')

), innerDiv = test.find('.innertest').parent().appendTo('body')

这是在将内容附加到body元素之前进行操作。这是您想要的吗？如果不是，请具体说明一下。

- meder omuraliev

---

不完全正确。这不是我制造它们的情况。如果我能制造它们，我会随时创建变量。我有一个情况，我有一个HTML字符串，我想在将其附加到页面之前从中找到元素并进行操作。 - Matt

嗯。所以在我的代码片段中只需去掉 .appendTo 并按照您的意愿操作即可。您的问题有点令人困惑。 - meder omuraliev

Answer 5

我相信你目前拥有的代码可以工作。例如，要更改内部 div 中的文本，可以执行以下操作：

var html = '<div class="test"><div class="innertest">Hello!</div></div>';
$(html).find(".innertest").text("Goodbye!");

- Sophie Alpert

Answer 6

如果您将有效的 HTML 字符串传递给 jQuery()，它将返回一个带有新创建的 DOM 元素的 jQuery 对象。然后您可以在稍后的时间将该对象附加到 body 上，例如：

  var newDiv = $("<div class='test'><div class='innertest'>Hello!</div></div>");
  var innerDiv = newDiv.find('.innertest');
  innerDiv.css('background-color', 'blue');
  $('body').append(newDiv);      

- gnarf

Answer 7

据我所了解，您想在显示之前编辑某个DOM片段以满足您的需求，就像您操作当前显示的DOM一样。

我建议为此做一个变通方法，我已经多次使用了类似的目的

1. 首先添加DIV / 元素并立即隐藏它。
2. 然后，您可以自由地对其进行编辑。
3. 进行任何类型的编辑 / CSS应用程序 / DOM操作，然后取消隐藏元素或将其删除，如果您只是想从中获得一些数据。
4. 完成！

编辑 要解决可能出现闪烁的问题，您可以再做另一件事。

1. 创建一个空DIV并将其隐藏（隐藏一个空DIV可能不会引起闪烁，因为它会非常快速地发生）
2. 然后附加您想要的DOM对象（同时隐藏它）
3. 然后随心所欲地编辑它。

如果我错误地理解了您的问题，请告诉我。

- OrangeRind

---

这个会起作用 - 但是它可能会闪烁，这会在一瞬间破坏布局。 - Matt

检查编辑。虽然我没有遇到闪烁问题，但它似乎工作非常迅速！ - OrangeRind

Answer 8

如果您有XML或XHTML文件，可以使用jQuery进行操作，如下所示：

var html = "<div class='test'><div class='innertest'>Hello!</div></div>";
var domFragment = $(html);
domFragment.find('.innertest'); //More jQuery...

创建一个片段来操作XML POST/GET响应也非常好用。

- Ohhh