将 html 元素从一个节点移动到另一个节点

Question

我想将一个 html 元素从一个节点移动到另一个节点，但我不知道如何，当我一开始想到它时这似乎很容易，但实际上它有点难我仍然认为它很愚蠢。

这是一个例子：

    <div class="container">
    <h1>text</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    <div class="con">

    </div>
<button> click ME </button>

我想将 .container div 中的内容移动到 .co div 我在谷歌上搜索了很多但我没有找到任何有用的东西，我什至在 stackoverflow 上搜索过但我做到了找到解决办法。

任何帮助，请提前谢谢你

我看到但没有解决问题的问题：

Moving HTML element from one page to another

"Cut and Paste" - moving nodes in the DOM with Javascript

How to move all HTML element children to another parent using JavaScript?

Answer 1

这里是解决方案： HTML

<div id="parent1" class="container">
  <h1>text</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="parent2" class="con">

</div>

JS

let insideContainer = document.getElementById('parent1');
let con = document.getElementById('parent2');

con.append(...insideContainer.children);

Answer 2

您需要找到一种方法从.container div 中删除每个元素，然后将它们中的每一个添加到.con div 中。我会这样做：

// get all children of container
const containerChildren = document.querySelector('.container').children;
// turn them into an array and loop through them
Array.from(containerChildren)).forEach((el) => {
    // remove element
    el.remove();
    // select .con and add it to that div
    document.querySelector('.con').append(el);
});

你可以把它变成一个函数，然后像这样将它添加到按钮中：

function handleClick() {
    const containerChildren = document.querySelector('.container').children;
    Array.from(containerChildren)).forEach((el) => {
        el.remove();
        document.querySelector('.con').append(el);
    });
}
document.querySelector('button').onclick = handleClick;

Answer 3

一个简单的方法是：当div.container 中至少有一个元素 时，将其移动到div.con。 an 元素 是JavaScript 的HTMLElement 对象firstChild 属性，因此只要有第一个子元素，就将其移至div.con。

这是一个演示，它包含大量有用的 cmets：

/** selecting the main "divs" and the "button" **/
let container = document.querySelector('.container'),
  con = document.querySelector('.con'),
  btn = document.getElementById('move');

/** click handler for the "button" **/
move.addEventListener('click', e => {
  while (el = container.firstChild) con.appendChild(el); /** move the child to the other div and keep their appearnance (placement) as they were in the first "div" **/
});

/** some styling to distinguish between the two main eements (divs) **/

.container,
.con {
  padding: 15px;
  border: 2px solid transparent;
  margin: 15px 0;
}

.container {
  border-color: blue;
}

.con {
  border-color: red;
}

<!-- the button is selected in "JavaScript" based on its ID (move) -->
<!-- some styling is used to distinguish between the elements : the ".contaier" has a blue border while the ".con" has a red one. Notice which element has children in it after clicking the "button" -->

<button id="move">Move elements</button>

<div class="container">
  <h1>text</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div class="con"></div>

Answer 4

您可以通过以下语法在 html 代码中使用类的链接来使用每个类：

<head> <link href="class.css" rel="stylesheet" type="text/css" /> </head>
但是，如果您没有类文件 (file.css)，首先您必须在文件中写入您的 css：class.css，然后在您想要的任何地方使用该代码！