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:

  1. document.querySelector('container').append("<span>Welcome</span>")
    it creates span element and insert it in container element
  2. document.querySelector('container').append(document.querySelectorAll("ul"))
    it insert all UL elements in container element.
  3. document.querySelector('container').append([1,2,3,4,5,6,"<br>","hello","how","are","you","?"])
    it insert all elements of array in container element.


Download MYJS.js

MyJs is a collection of java script extension methods that enhances the JavaScript objects, class object, DOM element, domElementsCollections, Date, String, Number and other data type. 

Include in you project landing page (master page) and it will extends your DOM and JavaScript Objects.

Comments

Post a Comment

Popular posts from this blog

javascript : String.right

  javascript : String .right( n ) Target: Applicable with  String  Data Type. Description : return last n number of charector from string. Syntax: String .right( n ) Usase: "abcdefghijklmnopqrstuvwxyz".right(7) It return string "tuvwxyz" Download MYJS.js MyJs is a collection of java script extension methods that enhances the JavaScript objects, class object, DOM element, domElementsCollections, Date, String, Number and other data type.  Include in you project landing page (master page) and it will extends your DOM and JavaScript Objects.
Read more

javascript : String.left

  javascript : String .left( n ) Target: Applicable with  String  Data Type. Description : return first n number of charector from string. Syntax: String .left( n ) Usase: "abcdefghijklmnopqrstuvwxyz".left(7) It return string "abcdefg" Download MYJS.js Include in you project landing page (master page) and it will extends your DOM and JavaScript Objects.
Read more

javascript : .nextAll()

  javascript : .nextAll() Target: Applicable with any DOM element. getElementById getElementsByTagName getElementsByClassName getElementsByName querySelector querySelectorAll select etc. Description : return DOMNodeList of next all sibling elements of selected element. Note: if selector is DOM Elements List then first node element's next all sibling nodes return as DOMNodeList. Syntax: DOMElement.nextAll() DOMNodeList.nextAll() HTMLCollection.nextAll() Usase: document.getElementById('firstDiv').nextAll() it search element having id firstDive and return all elements next to it in same parent as DOMNodeList. document.getElementsByTagName('div').nextAll() the getElementsByTagName selects all div and nextAll() method return first div's next all sibling nodes as DOMNodeList document.getElementsByClassName('FirstDiv').nextAll() the getElementsByClassName selects all div having class "FirstDiv" and nextAll() method return first element's next all ...
Read more