javascript dom manipulation code example

Example 1: javascript dom manipulation

var newDiv = document.createElement('div');
newDiv.innerHTML = '<p>Hello World!</p>';
document.body.appendChild(newDiv);

Example 2: Html dom

<!-- USING EVENT HANDLER FOR  DOM HTML -->
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <title>WEB222</title>
   <style> 
      body { margin: 0 18%; }
   </style>
   <script>
	 window.onload = function() { // why use window.onload?
		 var elem = document.querySelector("#myBtn");
		 elem.addEventListener( "click", displayDate );

	 }

     function displayDate() {
        document.querySelector("#demo").innerHTML = (new Date()).toLocaleString();
	 }
   </script>
</head>
<body>
  <h1>WEB222 - HTML DOM Event</h1>
  <p>Click "Show Current Time" to execute the displayDate() function.</p>
  <p id="demo"></p>

  <button id="myBtn">Show Current Time</button>
  
  <br>
  <!-- for downloading source files -->
  <p><a href="" Download>Download</a></p>
</body>
</html>

Example 3: javascript es6 dom manipulation

myElement.matches('div.bar') === true

Example 4: javascript es6 dom manipulation

const myElements = document.querySelectorAll('.bar')

Example 5: javascript es6 dom manipulation

const myChildElemet = myElement.querySelector('input[type="submit"]')

// Instead of
// document.querySelector('#foo > div.bar input[type="submit"]')

Example 6: javascript es6 dom manipulation

const myElement = document.querySelector('#foo > div.bar')

Tags:

Misc Example

Recent Posts