如何将这2个子div并排添加2 div到1 div？

Question

以下是我的div：

<div id="10" class="latestblock">
    <img>
    <span>Abc</span>
</div>

<div id="11" class="latestblock">
    <img>
    <span>pqr</span>
</div>

function AppendDiv(10,11)
{
var eFrom = $('#' + 10);
var toDiv = $('#' + 11);
var htmldiv = eFrom.toString() + toDiv.toString();
  <!--$("#large").html
                (
                    htmldiv
                ).center().fadeIn("slow");--> Not working
}

现在我想将这个div添加到下面的div：

<div id="large"></div>   

我想要这样的div：

我生成的输出html应该是这样的：

<div id="large">
    <div id="10" class="latestblock">
        <img>
        <span>Abc</span>
    </div>

    <div id="11" class="latestblock">
        <img>
        <span>pqr</span>
    </div>
</div>

怎么做？

Answer 1

10和11不能是参数名称（您的参数名称不能是值，但变量和变量不能以Numbers开头）。使用outerHTML抓取Markup的{​​{1}}。将元素selected elements设为.hide()

fadeIn()

function AppendDiv(one, two) {
  var eFrom = $('#' + one);
  var toDiv = $('#' + two);
  var htmldiv = eFrom[0].outerHTML + toDiv[0].outerHTML;
  $("#large").html(htmldiv).hide().fadeIn("slow");
}


AppendDiv('10', '11');

注意：正如guest271314所指出的，您不会在DOM中使用重复的<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div id="10" class="latestblock"> <img> <span>Abc</span> </div> <div id="11" class="latestblock"> <img> <span>pqr</span> </div> <hr> <div id="large"></div>元素。

Answer 2

您可以使用.append()

$("#large").append(eFrom.fadeOut(0), toDiv.fadeOut(0)).find("div").fadeIn("slow");

Answer 3

让它更容易。只需在变量中定义两个div的html（），然后将其附加到#large div。

中

var div1 = $('#10')[0].outerHTML;
var div2 = $('#11')[0].outerHTML;

$('#large').append(div1 + div2);

示例：https://jsfiddle.net/86zx3b5m/2/