AzharAli-github · AzharAli-github · Jan 27, 2023 · Jan 27, 2023
diff --git a/JavaScript/Advance/DOM/4. HTML DOM/images/js-logo.png b/JavaScript/Advance/DOM/4. HTML DOM/images/js-logo.png
diff --git a/JavaScript/Advance/DOM/4. HTML DOM/images/one.jpg b/JavaScript/Advance/DOM/4. HTML DOM/images/one.jpg
diff --git a/JavaScript/Advance/DOM/4. HTML DOM/images/two.jpg b/JavaScript/Advance/DOM/4. HTML DOM/images/two.jpg
diff --git a/JavaScript/Advance/DOM/4. HTML DOM/index.html b/JavaScript/Advance/DOM/4. HTML DOM/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DOM-Changing-HTML</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="shortcut icon" href="images/js-logo.png" type="image/x-icon">
+
+</head>
+
+<body>
+    <h1>DOM-Changing HTML</h1>
+    <h2>Example One</h2>
+    <p id="textOne">Hello There</p>
+    <button onclick="DisplayOne()">Click to change the above content</button><br><br>
+    <h2>Example Two</h2>
+    <img src="images/one.jpg" alt="" id="imgOne"><br>
+    <button onclick="DisplayTwo()">Click to change the above image</button>
+    <h2>Example Three</h2>
+    <p id="textTwo"></p>
+    <h2>Example Four</h2>
+    <p id="textThree"></p>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/JavaScript/Advance/DOM/4. HTML DOM/script.js b/JavaScript/Advance/DOM/4. HTML DOM/script.js
@@ -0,0 +1,25 @@
+//Example One
+let textOne = document.getElementById('textOne');
+
+function DisplayOne() {
+    textOne.innerHTML = "Hope you are Fine";
+}
+// Example Two
+let imgOne = document.getElementById('imgOne');
+
+function DisplayTwo() {
+    imgOne.src = "images/two.jpg"
+}
+// Example Three
+let textTwo = document.getElementById('textTwo');
+
+function DisplayThree() {
+    textTwo.innerHTML = "Date" + Date();
+}
+DisplayThree();
+
+// Example Four
+
+let textThree = document.getElementById('textThree');
+
+textThree.innerHTML = document.write(Date())
diff --git a/JavaScript/Advance/DOM/4. HTML DOM/style.css b/JavaScript/Advance/DOM/4. HTML DOM/style.css
@@ -0,0 +1,8 @@
+h2 {
+    font-family: monospace;
+}
+
+img {
+    height: 300px;
+    width: 300px;
+}