I'm trying to use NodeJS to modify an external HTML file (which is located in the same directory). In my index.js file I write:
fs.readFile('index.html', (err,html)=>{
if(err){
throw err;
}
html.body.innerHTML += '<div id = "asdf"></div>';
});
As index.html is a valid document. But it doesn't look to be reading it properly, as I get as an error:
"TypeError: Cannot read property 'innerHTML' of undefined".
I guess that html is not getting anything as body.
How can I do changes in HTML using JavaScript?
I'm trying to use NodeJS to modify an external HTML file (which is located in the same directory). In my index.js file I write:
fs.readFile('index.html', (err,html)=>{
if(err){
throw err;
}
html.body.innerHTML += '<div id = "asdf"></div>';
});
As index.html is a valid document. But it doesn't look to be reading it properly, as I get as an error:
"TypeError: Cannot read property 'innerHTML' of undefined".
I guess that html is not getting anything as body.
How can I do changes in HTML using JavaScript?
Share Improve this question edited Sep 20, 2021 at 14:23 Heretic Monkey 12.1k7 gold badges61 silver badges131 bronze badges asked Oct 7, 2019 at 6:53 F.J. Klaiber AboitizF.J. Klaiber Aboitiz 131 gold badge1 silver badge4 bronze badges 4- Thats not how it works. In your case it is just a string. Try to parse it with, for example npmjs./package/node-html-parser – Jeanluca Scaljeri Commented Oct 7, 2019 at 6:57
-
Where
html.bodyare defined?Cannot read property 'innerHTML' of undefinederror is already saying it – Abhishek Pandey Commented Oct 7, 2019 at 6:57 -
@AbhishekPandey my HTML document looks like this:
<html> <body> <h1>Node JS</h1> </body> </html>– F.J. Klaiber Aboitiz Commented Oct 7, 2019 at 7:04 - @JeanlucaScaljeri thanks, it looks interesting. I will try to go throughout that. – F.J. Klaiber Aboitiz Commented Oct 7, 2019 at 7:07
3 Answers
Reset to default 8Here is an example using node-html-parse
HTML file
<html>
<body>
<div id="fist">yolo</div>
</body>
</html>
And the nodejs
const fs = require('fs');
const parse = require('node-html-parser').parse;
fs.readFile('index.html', 'utf8', (err,html)=>{
if(err){
throw err;
}
const root = parse(html);
const body = root.querySelector('body');
//body.set_content('<div id = "asdf"></div>');
body.appendChild('<div id = "asdf"></div>');
console.log(root.toString()); // This you can write back to file!
});
There might be better solutions than node-html-parser, considering the amount of downloads. For example, htmlparser2 has much more downloads, but it also looks more plex :)
In order to manipulate an html file the way you'd be able to in a browser, you'll first need to parse it.
Perhaps node-html-parser can be of use? (Or if a few milliseconds of parsing are not a concern and you want some more functionality, the JSDOM package is very popular too.)
innerHTML is a function provided after DOM parsing. Here you are using a string, so you can either use a DOM parser to create the structure or you can just use regex to isolate the part you want to replace and append the text.
html.replace("</body>",'<div id = "asdf"></div></body>');