Adding Elements
The photo below shows how a web page is structured.
template.html
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 | <!DOCTYPE html>
<html>
<head>
<script src="external.js"> </script>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div id="main">
<h2>HANNIBAL - THE BATTLE OF CANNAE</h2>
<p>After defeating the Romans at the Battle of Lake Trasimene, Hannibal now moved his forces down south. There was panic in Rome and
Quintus Fabius Maximus was appointed dictator to deal with Hannibal. Fabius, however, refused to meet Hannibal in the open field
and this strategy became highly unpopular in Rome. Romans were used to attacking, not hiding. The Romans were forced to go on the
offensive after Hannibal positioned his forces betweeen Rome and it's vital grain supply. This setup the epic Battle of Cannae.
Here Hannibal defeated the Romans inflicting the worst single day defeat in Rome's history.</p>
<p>The Romans were then forced to retreat to Rome. It was a total defeat.</p>
<h2>AFTERMATH OF THE BATTLE OF CANNAE</h2>
<p>After the horrific defeat at the Battle of Cannae, the Romans reinstituted Fabius' avoidance strategy. The Romans no longer refused
to meet Hannibal in head on collisons. Rather the Roman army kept a watchful eye on Hannibal, but always at a close distance.</p>
<p>The avoidance strategy worked but it took forever. It took almost two long decades to drive Hannibal out of Italy. And even then
Hannibal was never defeated in Italy. The Romans, adopting a tactic out of Hannibal's playbook, launched an attack against Carthage
itself. This forced Hannibal to travel back to Africa to defend the city. Here he was defeated at the Battle of Zama.</p>
</div>
  
<button onclick="newParagraph()">Click if you want to read about another battle </button>
</body>
</html>
|
external.js
1 2 3 4 5 6 7 8 9 10 11 12 13 | function newParagraph() {
var element = document.createElement("p"); //create a new element <p>
var main = document.getElementById("main"); //get the id of <div>
main.appendChild(element); //attach the newly created <p> to the end of <div>
//put the text to be placed into <p> in a variable t
var t = document.createTextNode("The Battle of Salamis was fought between an alliance of Greek cities and the Persian Empire in 480 BC. The Greeks decisively defeated the Persian navy.");
element.appendChild(t); //attach t to the newly created <p>
}
|
Result
The screenshot on top is the original web page (before the button is pressed), the one on the bottom is the new webpage (after the button is pressed).
There are 2 issues with the above code. First, there is no title for the newly added paragraph. Second, if the button is pressed multiple times, the same new paragraph will be added to the web page multiple times. The code below solve these issues.
template.html
This code remains the same.
external.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | function newParagraph() {
var para = document.getElementsByTagName("p");
if (para.length <= 4) { //there are 4 paragraphs (<p>) in the original web page
var main = document.getElementById("main"); //get the id of <div>
var h2header = document.createElement("h2"); //create a new element <h2>
var element = document.createElement("p"); //create a new element <p>
main.appendChild(h2header); //attached the newly created <h2> to the end of <div>
main.appendChild(element); //attach the newly created <p> to the end of <div>
//put the title to be placed into <h2> in a variable h
var h = document.createTextNode("THE BATTLE OF SALAMIS");
//put the text to be placed into <p> in a variable t
var t = document.createTextNode("The Battle of Salamis was fought between an alliance of Greek cities and the Persian Empire in 480 BC. The Greeks decisively defeated the Persian navy.");
h2header.appendChild(h); //attach h to the newly created <h2>
element.appendChild(t); //attach t to the newly created <p>
}
}
|
Result
========================================================================
Removing Element
In this example, a new button is added to the page for removing a section.
template.html
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 | <!DOCTYPE html>
<html>
<head>
<script src="external.js"> </script>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div id="main">
<h2>HANNIBAL - THE BATTLE OF CANNAE</h2>
<p>After defeating the Romans at the Battle of Lake Trasimene, Hannibal now moved his forces down south. There was panic in Rome and
Quintus Fabius Maximus was appointed dictator to deal with Hannibal. Fabius, however, refused to meet Hannibal in the open field
and this strategy became highly unpopular in Rome. Romans were used to attacking, not hiding. The Romans were forced to go on the
offensive after Hannibal positioned his forces betweeen Rome and it's vital grain supply. This setup the epic Battle of Cannae.
Here Hannibal defeated the Romans inflicting the worst single day defeat in Rome's history.</p>
<p>The Romans were then forced to retreat to Rome. It was a total defeat.</p>
<h2>AFTERMATH OF THE BATTLE OF CANNAE</h2>
<p>After the horrific defeat at the Battle of Cannae, the Romans reinstituted Fabius' avoidance strategy. The Romans no longer refused
to meet Hannibal in head on collisons. Rather the Roman army kept a watchful eye on Hannibal, but always at a close distance.</p>
<p>The avoidance strategy worked but it took forever. It took almost two long decades to drive Hannibal out of Italy. And even then
Hannibal was never defeated in Italy. The Romans, adopting a tactic out of Hannibal's playbook, launched an attack against Carthage
itself. This forced Hannibal to travel back to Africa to defend the city. Here he was defeated at the Battle of Zama.</p>
</div>
  
<button onclick="newParagraph()">Click if you want to read about another battle </button>
<br></br>
  
<button onclick="removeParagraph()">Click here to remove section</button>
</body>
</html>
|
external.js
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 52 | function newParagraph() {
var para = document.getElementsByTagName("p");
if (para.length <= 4) { //there are 4 paragraphs (<p>) in the original web page
var main = document.getElementById("main"); //get the id of <div>
var h2header = document.createElement("h2"); //create a new element <h2>
var element = document.createElement("p"); //create a new element <p>
main.appendChild(h2header); //attached the newly created <h2> to the end of <div>
main.appendChild(element); //attach the newly created <p> to the end of <div>
//put the title to be placed into <h2> in a variable h
var h = document.createTextNode("THE BATTLE OF SALAMIS");
//put the text to be placed into <p> in a variable t
var t = document.createTextNode("The Battle of Salamis was fought between an alliance of Greek cities and the Persian Empire in 480 BC. The Greeks decisively defeated the Persian navy.");
h2header.appendChild(h); //attach h to the newly created <h2>
element.appendChild(t); //attach t to the newly created <p>
}
}
function removeParagraph() {
var para = document.getElementsByTagName("p");
//don't remove the original headers and elements if the newly added ones
//are gone or don't exist
if (para.length > 4) {
//getting the position of the last h2 header in the h2 header list
var h2header = document.getElementsByTagName("h2");
var lasth2post = h2header.length-1;
//getting the last h2 header
var lasth2header = document.getElementsByTagName("h2")[lasth2post];
//finding the parent of the last h2 header
var parent = lasth2header.parentNode;
//removing the last h2 header from its parent
parent.removeChild(lasth2header);
//getting the position of the last p element in the p element list
var lastparapost = para.length-1;
//getting the last p element
var lastparaelement = document.getElementsByTagName("p")[lastparapost];
//finding the parent of the last p element
var parent = lastparaelement.parentNode;
//removing the last p element from its parent
parent.removeChild(lastparaelement);
}
}
|
Note, Line 48 can be removed because <h2> and <p> share the same parent.
Source:
JavaScript Tutorial for Beginners - 36 - Creating a new element
https://youtu.be/_OOj_d3Zdig?list=PLr6-GrHUlVf96NLj3PQq-tmEB6woZjwEl
JavaScript Tutorial for Beginners - 37 - Creating a new element Part 2
https://youtu.be/HvWnkj8nh8Y?list=PLr6-GrHUlVf96NLj3PQq-tmEB6woZjwEl
No comments:
Post a Comment