Question

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

这是一个示例：

    <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上，我在Google上进行了很多搜索，但没有发现有用的东西，即使在这里也进行了搜索，但是我确实找到了解决方案。

请提供任何帮助，并先谢谢您

我已经看到并没有解决问题的问题：

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。 一个元素是JavaScript的{{1}}对象HTMLElement的属性，因此只要有第一个子元素将其移动到firstChild。

这是一个演示，其中包含大量有用的评论：

div.con

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

Answer 4

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

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

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

4 个答案: