Запустить
<!doctype html> <html lang="ru"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>JavaScript Events - Transition Events</title> <style> *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; background-color: #fff; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 15px; } p { margin-top: 0; } a { border-bottom: 1px dashed #4caf50; text-decoration: none; color: #4caf50; padding: 2px 6px; margin-right: 5px; } a:hover { border-bottom: 1px dashed #424242; text-decoration: none; color: #424242; } </style> <script> document.addEventListener('DOMContentLoaded', () => { document.addEventListener('click', (e) => { const way = e.target.dataset.way; if (!way) { return; } const $firstList = document.querySelector('#first'); const $secondList = document.querySelector('#second'); switch (way) { case '1': // 1 способ - с использованием appendChild while ($secondList.children.length) { $firstList.appendChild($secondList.children[0]); // или // $firstList.insertBefore($secondList.children[0], null); } break; case '2': { // 2 способ - с использованием appendChild и DocumentFragment let $fragment = new DocumentFragment; while ($secondList.children.length) { $fragment.appendChild($secondList.children[0]); } $firstList.appendChild($fragment); } break; case '3': { // 3 способ - с использованием append, DocumentFragment и forEach let $fragment = new DocumentFragment; Array.from($secondList.children).forEach(($element) => { $fragment.append($element); }); $firstList.append($fragment); } break; case '4': // 4 способ - с использованием insertAdjacentHTML $firstList.insertAdjacentHTML('beforeend', $secondList.innerHTML); $secondList.textContent = ''; break; case '0': // восстановить списки $firstList.innerHTML = '<li>One</li><li>Two</li><li>Three</li>'; $secondList.innerHTML = '<li>Four</li><li>Five</li><li>Six</li><li>Seven</li>'; break; } }) }); </script> </head> <body> <h1 style="font-size: 20px;">Задача 01</h1> <p style="color: #616161;">Имеется два списка в документе. Необходимо переместить элементы из второго списка в первый. </p> <ul id="first"> <li>One</li> <li>Two</li> <li>Three</li> </ul> <ul id="second"> <li>Four</li> <li>Five</li> <li>Six</li> <li>Seven</li> </ul> <a href="#" data-way="0">Сбросить</a> <a href="#" data-way="1">1 способ</a> <a href="#" data-way="2">2 способ</a> <a href="#" data-way="3">3 способ</a> <a href="#" data-way="4">4 способ</a> </body> </html>