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

我只是想知道在将元素附加到DOM之前是否有一个干净的实现来获取元素。

示例(w / jQuery):

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

我觉得这是不可能的,但我想看看是否有任何实现允许这一点 – 因为这对于类和分离来说非常好。

编辑:我想知道这是否可行。 我的意思是干净,它不像字符串替换或黑客攻击。 这不是我制作它们的情况。 如果我可以制作它们,我会随便创建变量。 我有一个情况,我有这个html字符串,我想找到元素和操作之前我将它附加到我的页面。

你看过DOM DocumentFragments了吗?

这就是我最终做到的方式:

 var test = $("
"); test.append(html); test.find(".innertest"); // When I'm ready to append it.. $('#container').append(test);

我不得不修改我的HTML流,但这最终成为一种干净的方法。 谢谢你的所有建议!

 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

我正在寻找同样的事情(这就是我到达这里的方式)并在阅读了你所得到的解决方案之后,我想出了这个。 它对我需要的东西很有用。

 var test = $('
').addClass('test').append( $('
').addClass('innertest').text('Hello!') ), innerDiv = test.find('.innertest').parent().appendTo('body')

这是在追加到body元素之前进行的操作。 这是你的意思吗? 如果没有,请指定?

我相信你现在拥有的东西会起作用。 例如,要更改内部div的文本,您可以执行以下操作:

 var html = '
Hello!
'; $(html).find(".innertest").text("Goodbye!");

据我所知,您希望在显示之前编辑某个DOM以满足您的需求 ,就像您操作当前在显示中的DOM一样。

我宁愿建议为此做一个解决方法,我为了类似的目的多次使用它

  1. 首先附加 DIV /元素并立即隐藏它
  2. 之后您可以随意编辑它
  3. 做任何类型的编辑 / CSS应用程序/ DOM Manip,然后取消隐藏元素 或删除它,如果你只是想要一些数据。
  4. 当当!

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

  1. 创建一个空DIV并隐藏它(隐藏一个空div可能不会导致闪烁,因为它会发生得非常快)
  2. 然后追加你想要的DOM对象(当它被隐藏时)
  3. 然后对它施以怜悯。

如果我理解你的问题错了,请告诉我。

如果将一串有效的HTML传递给jQuery() ,它将返回一个jQuery对象,并重新创建DOMElements。 然后,您可以在以后将该对象附加到正文,即:

  var newDiv = $("
Hello!
"); var innerDiv = newDiv.find('.innertest'); innerDiv.css('background-color', 'blue'); $('body').append(newDiv);

如果您有xml或xhtml,您可以使用jQuery操作它,如下所示:

 var html = "
Hello!
"; var domFragment = $(html); domFragment.find('.innertest'); //More jQuery...

创建一个操作片段也适用于xml POST / GET响应。