Here’s a guide to help you clone list elements using JavaScript. This technique is useful for dynamically creating copies of list items and adding them to another part of your webpage, which can be helpful for tasks such as filtering, reordering, or duplicating content.
Setting Up the HTML Structure
First, we need to define the basic HTML structure that will contain our original list and the container where we will append the cloned list elements. This involves creating a simple layout with a list and a designated area for the clones.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Satisfy&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div class="wrap">
<div class="left">
<ol class="lista">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li class="especial">Nam at ante vehicula, posuere enim a, ornare massa.</li>
<li>Maecenas tincidunt mauris non blandit gravida.</li>
<li class="especial">Phasellus eget turpis id lorem pulvinar finibus nec ac ipsum.</li>
<li>Donec a odio posuere dui elementum mattis.</li>
<li class="especial"> Nullam id elit ut quam dignissim posuere.</li>
<li class="especial">Duis sollicitudin risus ac lectus bibendum, eget cursus ligula dictum.</li>
</ol>
</div>
<div class="container"></div>
</div>
<script src="liClone.js"></script>
Adding CSS Styles
Next, we’ll add some CSS to style the list and the container. This step ensures that the list and the cloned elements are visually appealing and properly positioned on the page.
*{
padding: 0;
margin: 0;
}
.wrap{
height: 100vh;
width: 100vw;
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 50vw 50vw;
}
.left{
height: 100vh;
width: 50vw;
}
ol{
display: block;
padding: 30%;
}
.container{
background-color:rgb(223, 242, 247);
padding: 5%;
height: 100vh;
width: 50vw;
}
.especial{
font-family: 'Satisfy', cursive;
}
Writing the JavaScript Functionality
Now comes the core part: writing the JavaScript code to select the list elements we want to clone and append them to the specified container. The following JavaScript code will create clones of specific list elements and add them to the container.
let liClassEspecial = document.querySelectorAll("li.especial");
let liArray = Array.from(liClassEspecial);
let container = document.querySelector(".container");
let olElement = document.createElement("ol");
container.appendChild(olElement);
var insert = () => {
for(i=0; i<=liArray.length; i++){
try {
var liClone = liArray[i].cloneNode(true);
olElement.appendChild(liClone);
} catch(err) {
err;
}
}
}
insert();
Adding Footer Assets
In conclusion, by following these steps, you can successfully clone list elements using JavaScript. This method provides a dynamic way to duplicate and manipulate list content on your webpage, enhancing user experience and interactivity.
