How to access the document object model?

I am learning about manipulating the DOM w/ javascript. I understood that JS can only access the DOM in a browser-environment, because the DOM is only available in the browser, and JS, being a "client-side" language, can run on the browser, access the DOM, and manipulate it. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" />… Read More How to access the document object model?

scrollToElement function using javascript

this javascript content: function scrollToElement(elementSelector, instance = 0) { const elements = document.querySelectorAll(elementSelector); if (elements.length > instance) { elements[instance].scrollIntoView({ behavior: "smooth" }); } } const link1 = document.getElementById("link1"); const link2 = document.getElementById("link2"); const link3 = document.getElementById("link3"); link1.addEventListener("click", () => { scrollToElement(".header"); }); but i not understand this and why it used instance and what tthe… Read More scrollToElement function using javascript

How to remove an element that has been modified by outerHTML

I have an element in the DOM that I update its HTML using outerHTML property, but I can’t remove it using a method like remove(). <div id="element">Element</div> <div id="remove">Removed element</div> const element = document.getElementById("element"); const removedElement = document.getElementById("remove"); element.outerHTML = "<div>First</div>"; element.remove(); removedElement.remove(); In my example, element gets updated using outerHTML, but I can’t remove… Read More How to remove an element that has been modified by outerHTML

Setting colspan with Javascript on certain td (without any id)

I need to apply some CSS/JS on an existing web page. Within it there is <tr foodtablesupper> <td class="subheader" colspan="3"> Upper Floor </td> </tr> <tr foodchoice> <td class="dish-1"> Coleslaw </td> <td class="dish-2"> Porridge </td> </tr> <tr foodtablesupper> <td class="subheader" colspan="3"> Mezzanine Floor </td> </tr> I need to change the colspan to 4. How can I… Read More Setting colspan with Javascript on certain td (without any id)

How to delete a range of rows using javascript (Vanilla or JQuery)

I need to delete table rows in range from row with an ID "#deleteFirstRow" to row with an ID "#deleteLastRow". But all the other rows out of these two IDs should remain. NB: I tried to search posted answers but did not get any working solution. Please help! This is my table: <table> <tr>doNotDeleteRow</tr> <tr>doNotDeleteRow</tr>… Read More How to delete a range of rows using javascript (Vanilla or JQuery)