Question

假设我有一个简单的结构：

<div id="A"> 
    <div id="B"> 
        <div id="C"> </div>
    </div>
</div>
<div id="X"> </div>

例如，以某种方式（javascript，css，jQuery）改变C的位置并使其成为X的孩子是否可能？描述这种情况的术语是什么？

Answer 1

是否有可能以某种方式（javascript，css，jQuery）

是的，这是可能的。您可以使用以下javascript, css, jQuery

中的任何一个

您可以尝试此操作 - 使用jquery

的示例

$(function () {
   $("#X").append($("#C").clone());
   $("#C").remove();
});

Demo 该示例使用的是clone，append和remove jquery种方法

Answer 2

这是可能的。如果您不想依赖任何库，您可以这样做：

document.getElementById('X').appendChild(document.getElementById('C'));

这里的技巧是HTML元素最多可以存在于树中的一个位置，但DOM会为我们处理。既然你告诉它让C成为X的孩子，但是C已经是B的孩子，那么DOM知道让C停止成为B的孩子。这一切都作为单个动作处理，所以页面只有回流一次，这对性能有好处。

Answer 3

使用jQuery。

var el = $("#c").clone();
$("#x").append(el);

Answer 4

var c = document.getElementById('C'),
    x = document.getElementById('X');

x.appendChild(c);

Answer 5

您可以轻松操作DOM。你可以很容易地在jQuery中完成它

$（＆＃34;＃X＆＃34）。appendTo（＆＃34;＃C＆＃34）;

您可以在

找到更多信息

http://api.jquery.com/append/

Answer 6

确实有可能：

$("#X").append($("#C"));

或

$("#C").appendTo($("#X"));

jQuery为DOM操作提供了各种方法。你应该check them out。

<强>演示：

$(document).on('click', '#rearrange', function () {
  $("#X").append($("#C"));
});

div { padding: 10px; }
#A { background-color: red; }
#B { background-color: blue; }
#C { background-color: green; }
#X { background-color: yellow; }

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='button' value='Move C' id='rearrange' />
<div id="A"> A
    <div id="B"> B 
        <div id="C"> C </div>
    </div>
</div>
<div id="X"> X</div>

Answer 7

是的，试试这个：

var c = document.querySelector('#C');
var x = document.querySelector('#X');
c.parentNode.removeChild(c);
x.appendChild(c);

<div id="A">
  aa
  <div id="B">
    bb
    <div id="C">cc</div>
  </div>
</div>
<div id="X">xx</div>

Answer 8

有可能，但我不确定如何调用它。

您可以尝试使用此脚本。

var c = document.querySelector("#C");
document.querySelector("#X").appendChild(c);

Answer 9

使用jquery：

 $('#C').appendTo('#X');

这里是：Working Demo

Answer 10

您可以使用CSS定位它，使其在外部div＃X中可视化。 More on position

＆＃13;

div {
        width: 100px;
        height: 100px;
    }
    #A {
        background: #abcdef;
    }
    #B {
        background: #666;
    }
    #C {
        background: green;position: absolute; top: 110px; left: 10px;
    }
    #X{
        background: orange; padding: 10px;
    }

＆＃13;

 <div id="A">
        <div id="B">
            <div id="C">Inner div</div>
        </div>
    </div>
    <div id="X">Outer div</div>

＆＃13;

修改HTML的对象“树”？

10 个答案: