School
Advanced Javascript
Week 03
Demo
Complex DHTML
Demonstrates Complex DHTML
Dynamic html below supplied by javascript -
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const init = () => { | |
| let divContainer = document.createElement("div"); | |
| divContainer.setAttribute("class", "abc"); // | |
| let emailLabel = document.createElement("label"); | |
| emailLabel.setAttribute("for", "email"); | |
| emailLabel.innerHTML = "Email:"; | |
| let emailTextField = document.createElement("input"); | |
| emailTextField.setAttribute("type", "text"); | |
| emailTextField.setAttribute("id", "email"); | |
| divContainer.appendChild(emailLabel); | |
| divContainer.appendChild(emailTextField); | |
| document.querySelector("#display-box").appendChild(divContainer); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php require($_SERVER["DOCUMENT_ROOT"] . "templates/header.php") ?> | |
| <script src="complexElements.js" charset="utf-8"></script> | |
| <h1><a href="../../">Advanced Javascript</a></h1> | |
| <h2><a href="../">Week 03</a></h2> | |
| <h2>Demo</h2> | |
| <h3>Complex DHTML</h3> | |
| <p>Demonstrates Complex DHTML</p> | |
| <div id="display-box"> | |
| </div> | |
| <script type="text/javascript"> | |
| init(); | |
| </script> | |
| <?php require($_SERVER["DOCUMENT_ROOT"] . "templates/footer.php") ?> |