NodeJS - How to insert an element in a HTML document using Javascript?

Question

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?

Thats not how it works. In your case it is just a string. Try to parse it with, for example npmjs.com/package/node-html-parser — Jeanluca Scaljeri
– Jeanluca Scaljeri, Commented Oct 7, 2019 at 6:57
Where html.body are defined? Cannot read property 'innerHTML' of undefined error is already saying it — Abhishek Pandey
– 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
– 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
– F.J. Klaiber Aboitiz, Commented Oct 7, 2019 at 7:07

Jeanluca Scaljeri · Accepted Answer · 2019-10-12 20:15:39Z

8

Here 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 complex :)

edited Oct 12, 2019 at 20:15

answered Oct 7, 2019 at 7:18

Jeanluca Scaljeri

29.6k68 gold badges240 silver badges389 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

F.J. Klaiber Aboitiz Over a year ago

I had to change the second argument of 'fs.readFile' to utf8, but it looks great. Thank you so much! Also, html parser looks to be helpful for more complex things to do.

Glorfindel · Accepted Answer · 2022-11-07 09:04:54Z

1

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.)

edited Nov 7, 2022 at 9:04

Glorfindel

22.8k13 gold badges97 silver badges124 bronze badges

answered Oct 7, 2019 at 7:12

Matt

8168 silver badges20 bronze badges

Comments

Dhananjai Pai · Accepted Answer · 2019-10-07 06:59:57Z

-1

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>');

answered Oct 7, 2019 at 6:59

Dhananjai Pai

6,0052 gold badges12 silver badges25 bronze badges

3 Comments

F.J. Klaiber Aboitiz Over a year ago

That's right, but my main problem now is that I'm not getting the HTML document in the htmlvariable. Now I'm getting TypeError: html.replace is not a function.

Dhananjai Pai Over a year ago

are you sure the path is right ? I mean, it is basic fileread, once you have the string in the callback, it should be easy. What is the error you are getting ?

Jeanluca Scaljeri Over a year ago

In your case readFile returns a Buffer. Read the file as fs.readFile('index.html', 'utf8', (err, html) => { ... }) and it will work. But doing this with RegExes is fragile, don't do it and use a parser!

Collectives™ on Stack Overflow

NodeJS - How to insert an element in a HTML document using Javascript?

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related