修改 HTML 的 "tree" 或 objects？

Question

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

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

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

Answer 1

使用jQuery.

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

Answer 2

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

x.appendChild(c);

Answer 3

您可以轻松地操纵 DOM。您可以在 jQuery 非常轻松地做到这一点

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

您可以在

找到更多信息

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

Answer 4

确实有可能：

$("#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 5

是的，试试这个：

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 6

有可能，但不知道怎么称呼。

您可以试试这个脚本。

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

Answer 7

Would it be possible, in some way (javascript, css, jQuery)

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

您可以试试这个 - 例如使用 jquery

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

Demo 该示例使用 clone, append and remove 的 jquery 方法

Answer 8

使用jquery:

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

这里是：Working Demo

Answer 9

您可以使用 CSS 定位它，使其在视觉上位于外部 div#X 内。 More on position

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;
    }

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

Answer 10

有可能。如果你不想依赖任何库，你可以这样做：

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

这里的技巧是 HTML 元素最多可以存在于树中的一个位置，但是 DOM 为我们处理了这个 。因为你告诉它让 C 成为 X 的 child，但 C 已经是 B 的 child，所以 DOM 知道让 C 不再是 child 的B. 这一切都作为单个操作处理，因此页面只需重排一次，这对性能有好处。

修改 HTML 的 "tree" 或 objects？

Modifying an HTML's "tree" of objects?

html

javascript

css

jquery