首頁猿問將 html...

將 html 元素從一個節點移動到另一個節點

JavaScript

忽然笑 2021-08-20 18:38:09

我想將一個 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上搜索過，但我確實找到了解決方案。請提供任何幫助，并在此先感謝您

查看完整描述

3 回答

呼如林

TA貢獻1798條經驗獲得超3個贊

一個簡單的方法是：同時至少有一個元素在div.container移動它div.con。該元素是JavaScript的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;

}

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

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

反對回復 2021-08-20

LEATH

TA貢獻1936條經驗獲得超7個贊

您需要找到一種方法來從.containerdiv 中刪除每個元素，然后將它們中的每一個添加到.condiv 中。我會這樣做：

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

反對回復 2021-08-20

3 回答
0 關注
508 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

將 html 元素從一個節點移動到另一個節點

將 html 元素從一個節點移動到另一個節點

3 回答

添加回答