Advertisement:
Read Later
Sometimes you want to copy an HTML element to use its parameters to create a new version of it such as a letter scope for each new entry from a new user. JavaScript HTML DOM Document lets us either to collect or change parameters that of an HTML element. And, by using them, we can either copy any HTML element we want or let a visitor perform that action. In order to create a new HTML element, we have to use the HTML DOM createElement() method. After creating a new element, you can attach any parameter variable to this new element effortlessly. And, surprisingly, you have just copied an HTML element by taking these steps. To insert the copied element to a parent element, use HTML DOM appendChild() or HTML DOM insertBefore() methods.
In which case you want to add an index on an HTML element, I recommend you to use the HTML DOM createTextNode() method and append it under the HTML element as a new child.
Also, you can add classes to design copied elements by using the HTML DOM classList.add() method, which is most importantly for removing them.
When you use the HTML DOM getElementsByClassName() method, it returns all elements with the specified class name as an array so that you can reach any element by merely using index numbers.
To remove the recent copied element, use the HTML DOM removeChild() method as well as the JavaScript array length property, explained on the code below.
Please click buttons to try and test the code below, named Copy and Remove.
var elementToCopy = document.getElementById("elementToCopy");
var textToCopy = document.getElementById("textToCopy");
var parentElement = document.getElementById("parentElement");
function copy(){
// Get parameters.
var imgSrc = elementToCopy.src;
var figText = textToCopy.innerHTML;
// Create new image and figcaption elements.
var newImg = document.createElement("IMG");
var newFig = document.createElement("FIGCAPTION");
// Attach parameters.
newImg.src = imgSrc;
newFig.appendChild(document.createTextNode(figText));
// Add classes to design copied elements.
newImg.classList.add("imgCopy");
newFig.classList.add("figCopy");
// Insert new elements to the parent element as child elements.
parentElement.appendChild(newImg);
parentElement.appendChild(newFig);
}
function remove(){
// Get copied element parameters by their class names.
var copiedImages = document.getElementsByClassName("imgCopy");
var copiedFigs = document.getElementsByClassName("figCopy");
// Remove the last created element on the feed by using its class name.
parentElement.removeChild(copiedImages[copiedImages.length-1]);
parentElement.removeChild(copiedFigs[copiedFigs.length-1]);
}
Result:
Figure - 45.1 https://www.bbc.com/news/science-environment-44113494