I am trying to read my index.html file from my server.js in order to add a new
- that links to a new html file I generate. I am using the POST method to do this and can successfully generate the new HTML file, however I am not sure how I can add a new
- inside the index.HTML.
Here is my server.js:
//POST method
if(req.method === 'POST'){
req.on('data', (data) => {
let elementObj = querystring.parse(data.toString());
element = elementObj.elementName;
elementSymbol = elementObj.elementSymbol;
elementAtomic = elementObj.elementAtomicNumber;
elementDescription = elementObj.elementDescription;
let newElement = fs.createWriteStream(`./public/${element}.html`);
newElement.write(`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The Elements - ${element}</title>
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<h1>${element}</h1>
<h2>${elementSymbol}</h2>
<h3>Atomic number ${elementAtomic}</h3>
<p>${elementDescription}</p>
<p><a href="/">back</a></p>
</body>
</html>`);
let indexElements = document.querySelector('#elements');
let li = document.createElement('li');
let a = document.createElement('a');
a.setAttribute('href', `/${element}.html`);
let elem = document.querySelector(`a[href = "/${element}.html"]`);
elem.innerHTML = `${element}`;
indexElements.appendChild(li);
li.appendChild(a);
res.end(data);
});
}
Here is my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The Elements</title>
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<h1>The Elements</h1>
<h2>These are all the known elements.</h2>
<h3>These are 2</h3>
<ol id = 'elements'>
<li>
<a href="/hydrogen.html">Hydrogen</a>
</li>
<li>
<a href="/helium.html">Helium</a>
</li>
</ol>
<script src="../../server.js"></script>
</body>
</html>
The result I want in my newly, modified index.html (new 'Boron' <li> added):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The Elements</title>
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<h1>The Elements</h1>
<h2>These are all the known elements.</h2>
<h3>These are 2</h3>
<ol id = 'elements'>
<li>
<a href="/hydrogen.html">Hydrogen</a>
</li>
<li>
<a href="/helium.html">Helium</a>
</li>
<li>
<a href="/boron.html">Boron</a>
</li>
</ol>
<script src="../../server.js"></script>
</body>
</html>
via Colin Sygiel
No comments:
Post a Comment