Is it possible to "update data" to and "existing html template" and then "save it" as a "new html file" with vanilla JavaScript?

Question

I have a basic template file of which I want to update data and then "save it" as a brand new separate html file.

Is it possible to do with Vanilla JavaScript?

Here is my example code:

window.onload = (event) => {

  function updateData(newData) {
    const toUpdate = document.getElementsByClassName('toUpdate')[0];
    toUpdate.innerText = 'Updated!'
  }

  updateData('Updated!')
};

// How can I save this html as a separate new html file with vanilla Javascript?

<!DOCTYPE html>
<html>

<head>
  <title>Document</title>
</head>

<body>
  <h1 class="toUpdate">Not updted</h1>
</body>

</html>
<!-- How can I save this html as a separate new html file with vanilla Javascript?  -->

Is it possible to achieve this with Vanilla JavaScript?

Does this answer your question? [How to create a file in memory for user to download, but not through server?](https://stackoverflow.com/a/33542499) — bloodyKnuckles, Sep 29 '22 at 11:59

score 1 · Accepted Answer · answered Sep 29 '22 at 10:53

Vanilla JavaScript (typically defied as JavaScript + Web APIs provided by browser without third party libraries or browser extensions) cannot save files per se.

You can:

Trigger a download (which will typically get saved in the user's default downloads folder)
Make a POST or PUT request to a web service responsible for saving the file (on the server)
Use the FileSystem API to save files in a virtual sandbox

Is it possible to "update data" to and "existing html template" and then "save it" as a "new html file" with vanilla JavaScript?

1 Answers1