Author: John Au-Yeung

Sometimes, we want to clone a div and change the ID’s of it and all it’s children to be unique with JavaScript.

In this article, we’ll look at how to clone a div and change the ID’s of it and all it’s children to be unique with JavaScript.

How to clone a div and change the ID’s of it and all it’s children to be unique with JavaScript?

To clone a div and change the ID’s of it and all it’s children to be unique with JavaScript, we can use the cloneNode method.

For instance, we write:

const div = document.createElement('div')
const div2 = div.cloneNode(true)
div2.id = '2'

We call cloneNode with true to do a deep clone of the div.

Then we assign a new id value to by assigning a value to the id property.

Conclusion

To clone a div and change the ID’s of it and all it’s children to be unique with JavaScript, we can use the cloneNode method.

Sometimes, we want to find event listeners on a DOM node using JavaScript.

in this article, we’ll look at how to find event listeners on a DOM node using JavaScript.

How to find event listeners on a DOM node using JavaScript?

To find event listeners on a DOM node using JavaScript, we can use the getEventListeners function in the Google Chrome dev console.

For instance, we run:

getEventListeners(document.body)

to return all the event listeners added for the body element.

Then we get something like:

{
    "click": [
        {
            "useCapture": false,
            "passive": false,
            "once": false,
            "type": "click"
        }
    ]
}

from the console log.

Conclusion

To find event listeners on a DOM node using JavaScript, we can use the getEventListeners function in the Google Chrome dev console.

Sometimes, we want to change HTML element type with JavaScript.

In this article, we’ll look at how to change HTML element type with JavaScript.

How to change HTML element type with JavaScript?

To change HTML element type with JavaScript, we can use the replaceWith method.

For instance, we write:

const parent = document.createElement("div");
const child = document.createElement("p");
parent.appendChild(child);
const span = document.createElement("span");
child.replaceWith(span);

to create a div and p element with createElement.

Then we append child as the child of the parent with appendChild.

Next, we create a span with createElement.

And finally, we call child.replaceWith with span to replace the p element with the span element as the child of the div.

Conclusion

To change HTML element type with JavaScript, we can use the replaceWith method.

Sometimes, we want to add an element to the DOM with JavaScript.

In this article, we’ll look at how to add an element to the DOM with JavaScript.

How to add an element to the DOM with JavaScript?

To add an element to the DOM with JavaScript, we can use the appendChild method.

For instance, we write:

const newDiv = document.createElement("div");
newDiv.appendChild(document.createTextNode("some text"));
document.body.appendChild(newDiv);

to create a new div with createElement.

Then we call createTextNode to create a new text node.

And then we append the text node as the child of the div with newDiv.appendChild.

Finally, we append the div as a child of the body element with document.body.appendChild.

Conclusion

To add an element to the DOM with JavaScript, we can use the appendChild method.

Sometimes, we want to detect middle mouse button click with JavaScript.

In this article, we’ll look at how to detect middle mouse button click with JavaScript.

How to detect middle mouse button click with JavaScript?

To detect middle mouse button click with JavaScript, we can check which button is clicked with e.button in the mousedown event handler.

For instance, we write:

window.onmousedown = (e) => {
  if (e.button === 1) {
    console.log('middle clicked')
  }
}

to set window.onmousedown to a function that checks if the middle mouse button is clicked by checking if e.button is 1.

If it is clicked, then 'middle clicked' is logged.

Conclusion

To detect middle mouse button click with JavaScript, we can check which button is clicked with e.button in the mousedown event handler.