Question

我有一种情况，我需要将一个兄弟元素添加到存储在变量中的jQuery对象。我需要添加的元素是该jQuery对象的前一个兄弟。

简化版本看起来像https://jsfiddle.net/sjncgaLf/4/

$(document).ready(function() {

  var test = $('<div class = "test">test</div>');
  var el = $('<div class = "el">el</div>');

  //I want to add el before test (without making a copy)
  //and then append the selector (el + test) to the DOM

  el.before(test);
  $("body").append(test);
});

显然，基于jsfiddle，此代码无法实现所需的效果。我的目标是实现像这样的结果

<div class = "el">el</div>
<div class = "test">test</div>

不复制原始元素。我已经彻底阅读了.before，.insertBefore和.add文档，看起来这些都不会产生我想要的内容。

提前致谢。

编辑：

我想需要更清楚。我一次制作1个月的日历。我需要从像$ markup这样的变量开始，并添加几周，直到我在这个月的每一天添加。我还需要在月份添加标签，例如＆＃34; 2016年7月和＃34;。所以，在我将任何周期附加到我的$ markup变量或向DOM附加任何内容之前，我希望我的$ markup看起来像这样

<div class = "label">July 2016</div>
<div class = "CalendarWeek"></div>

然后我会在那个月的日子里进行迭代，并根据需要添加尽可能多的CalendarWeek和CalendarDay。

Answer 1

您可以使用jQuery - insertBefore方法执行此操作。我已更新了您的jsFiddle

$(document).ready(function() {
  // create elements
  var test = $('<div class = "test">test</div>');
  var el = $('<div class = "el">el</div>');
  // add the first element
  $("body").append(test);
  // insert the second element 
  el.insertBefore(test);
});

Answer 2

尝试这样。

 $("body").append(el,test);

更新的小提琴：https://jsfiddle.net/sjncgaLf/14/

Answer 3

根据您的更新，您只需编辑变量，而不必担心按顺序添加数据。

因此，对于您的$ markup变量，如果它已经有数据并且您想在开头添加月份标签，请使用：

$temp = $label + $markup;
$markup = $temp;

要将$或day数据添加到$ markup变量的末尾，只需使用：

$markup = $markup + $day;

一旦你按照自己喜欢的方式构建了整个变量，就可以使用jQuery将它附加到你想要的地方。

使用jQuery，如何在不制作副本的情况下在另一个元素之前添加元素？

3 个答案: