Skip to content

Instantly share code, notes, and snippets.

@mudassaralichouhan

mudassaralichouhan/dynamic-element-create.js

Last active November 24, 2022 04:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mudassaralichouhan/c5fa318265bad85387cefe37b21985a2 to your computer and use it in GitHub Desktop.
Save mudassaralichouhan/c5fa318265bad85387cefe37b21985a2 to your computer and use it in GitHub Desktop.
Download ZIP
let clonedMenu = menu.cloneNode(true)
Raw
dynamic-element-create.js
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title>JavaScript cloneNode() Demo</title>
</head>
<body>
<ul id="menu">
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<script>
let menu = document.querySelector('#menu');
[1, 2, 3, 4, 5, 6, 7, 8, 9].forEach((val, index) => {
let clonedMenu = menu.cloneNode(true);
clonedMenu.id = 'menu-mobile-' + index;
clonedMenu.querySelectorAll('li').forEach((el, index) => {
el.innerHTML = el.textContent + ' ' + index + ' ' + val;
});
document.body.appendChild(clonedMenu);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment