How to Copy an HTML Element to another Element in JavaScript and jQuery

In the last year, I have decided to concentrate mainly on Drupal theme development. It has been a great journey and I have had the opportunity to work on some awesome projects across a range of industries with some great clients. In some of these projects, I have been able to use jQuery as it has been included. jQuery is great, it allows for easy traversal of the DOM and has a plethora of methods you can use. However, with jQuery now removed from Drupal as a dependency at start-up, it is included if you want to add it, I have decided for basic theme work to use vanilla JavaScript.

In this short snippet, I am going to look at a small script, first in jQuery and then vanilla JavaScript, that copies a menu DOM element to another div.

This is a pattern that I have seen used in a few projects and think it is good for when you need the same menu in 2 places. This is quite common when you have a desktop navigation and need a second copy for a mobile pop-out menu.

How to Copy an HTML Element to another div

Below is the jQuery script and then JavaScript.

const $mobile_nav = $("#mobile-nav");
const $main_nav = $("#block-spamenu").html();
$mobile_nav.append($main_nav);

As you can see the script is simple.

1. First, you select the div for the mobile navigation, this needs to be added to the HTML.
2. Then copy the menu element with the .html() method.
3. Finally, append the HTML to the element created in step 1.

In the below script, we use the innerHTML property to copy code and insertAdjacentHTML in place of append. Other than these differences, jQuery has the $ shorthand for selecting elements. In place of the $ we use getElementByID but we could use any of the Instance methods available to select elements in the document object model.

const mainNavDesktop = document.getElementById("desktop-nav");
const mainNav = document.getElementById("block-spamenu").innerHTML;
mainNavDesktop.insertAdjacentHTML( "afterbegin", mainNav);

insertAdjacentHTML

As such this is a whole other article but you will notice this instance method takes the position and a string that is parsed as HTML or XML. The position, afterbegin in this script, is handy as in jQuery you have other methods to achieve the same.

Also, it must be noted that in JavaScript if you used append you would get plain text appended. So we need to use insert adjacent HTML to prevent the HTML from being converted to plain text.

Summary

Even though jQuery is a useful library and I still use it for some components, such as Geofield for mapping in Drupal or to create a quick slider such as Slick Slider, it is not necessary to load it for basic UI manipulation. In time, it is possible new vanilla libraries and components will arise without dependencies on jQuery. Until that time jQuery still has its place in modern development and understating it will only help you in learning JavaScript and other frameworks. And for those in the know, you will see the similarities in the syntax of the Cypress testing library and the way selecting elements works, amongst other things.

I know this will be controversial to some, but hey, I am not saying to learn jQuery or even use it. Just become familiar with it as it is still widely used and it may open many more opportunities for you.

If you enjoyed this article and want to know when I post more on the topic of frontend development be sure to sign up for the newsletter below. I write about how to leverage Drupal as a fully fledge CMS and also use it to power your JavaScript frameworks and in particular Vue.js.

Thanks for reading and till next time, seize the day!