修改 HTML 的对象“树”

Modifying an HTML's "tree" of objects?

本文关键字：对象 HTML 修改      更新时间：2023-09-26

假设我有一个简单的结构，如下所示：

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

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

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

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

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

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

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

你可以试试这个 - 使用jquery的例子 

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

演示该示例使用克隆、追加和删除jquery方法

使用 jQuery。

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

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

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

$（"#X"）.appendTo（"#C"）;

您可以在以下位置找到更多信息

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

是的，试试这个：

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>

这是可能的，但我不确定这是怎么称呼的。

您可以尝试此脚本。

var c = document.querySelector("#C");
document.querySelector("#X").appendChild(c);
事实上，这是

可能的：

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

或

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

jQuery提供了多种DOM操作方法。你应该检查一下。

演示：

$(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>

您可以使用 CSS 将其放置在外部div#X 内。更多关于位置的信息

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>

使用 jquery：

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

这是： 工作演示

相关文章：