Posts

Showing posts with the label node

javascript domElement .append(domElement / htmlString)

  javascript domElement .append( domElement ) Target: add/create child element(s) in given element. getElementById getElementsByTagName getElementsByClassName getElementsByName querySelector querySelectorAll In case of DOM NodeList first Node Element is processed for append to child elements. Description : insert passed dom elements in selected dom element at the end of other child elements. Note: in case of string html is passed then new element is created and inserted. it return selected element for further processing. Syntax: DOMElement.append( domElement/htmlString ) DOMNodeList.append( domElement /htmlString ) HTMLCollection.append( domElement /htmlString ) Usase: document.querySelector('container').append("<span>Welcome</span>") it creates span element and insert it in container element document.querySelector('container').append(document.querySelectorAll("ul")) it insert all UL elements in container element. document.querySelector(...

javascript : .closest(cssSelector)

  javascript : .closest( cssSelector ) Target: Applicable with any DOM element. getElementById getElementsByTagName getElementsByClassName getElementsByName querySelector querySelectorAll select etc. Description : it search for closest parent element that matched with the selector. It traverse parentNode to parentNode untill matched with selector if no any parent element matched then it return empty array of nodeElementsList instead of null so nested statement not generate error due to null reference. Note : it start searching of selector from the element itself. That's mean if the element matches with the selector it return itself. Syntax: DOMElement.closest( cssSelector ) DOMNodeList.closest( cssSelector ) HTMLCollection.closest( cssSelector ) Usase: document.getElementById('firstDiv').closest( 'form' ) it search for firstDiv Element's parent form. document.getElementsByTagName('div').closest( 'form' ) the getElementsByTagName selects all div a...