In the JavaScript Tutorial, we will learn DOM & Create HTML elements at run time. Here, we iterate through all H3 or H2 Tags and list them as a Ordered List. Mean, we create Li tag and its text element at runtime using Document Object Model (DOM).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<!DOCTYPE html> <head> <Title> Java Script Windows </Title> </head> <body> <Script type="text/javascript"> function ListElements(name) { //Sample 01: Get Elements by Name (1 or More than 1) var elements = document.getElementsByName(name); var OrdList = document.getElementById("TagList"); OrdList.innerHTML = ""; for(i=0; i<elements.length; i++) { //Sample 02: Get the Text Elements //(H3 or H2 Text value in out case) var ElementText= elements[i].innerText ; //Sample 03: Get OL Tag (Orderded List) var OrdList = document.getElementById("TagList"); //Sample 04: Create Li and add Text as it Child var HtmlLI = document.createElement("li"); var LiText = document.createTextNode(ElementText); HtmlLI.appendChild(LiText); //Sample 05: Add Li to Ordered List OrdList.appendChild(HtmlLI); } } </Script> <hr> <H1> Document Object - Elements Iterations</H1> <hr> <h2 name="h2e"> Apple </h2> <h2 name="h2e"> Orange </h2> <h2 name="h2e"> Mango </h2> <h3 name="h3e"> France </h3> <h3 name="h3e"> India </h3> <h3 name="h3e"> U.S.A </h3> <input type="button" value="List H3 Elements" onclick="ListElements('h3e')"/> <input type="button" value="List H2 Elements" onclick="ListElements('h2e')"/> <ol id="TagList"> </ol> </body> </html> |
Categories: JavaScript
Do you like this Example? Please comment about it for others!!
This site uses Akismet to reduce spam. Learn how your comment data is processed.