CODEWITHSUNDEEP
javascriptajaxdynamic
BSD
BSD

Reputation: 339

More modern ways to dynamically create HTML content?

I have some experience writing HTML/JS/CSS pages and I have used JavaScript extensively to add elements, change elements, update style, classes, etc. and otherwise mess with the page in response to user actions. I'm not talking about that. I mean I could write something like

var win = window.open('','newWindow');
win.document.write("<html>");
win.document.write("<head>");
win.document.write("<style>body {color:red;}</style>");
win.document.write("</head>");
win.document.write("<body>");
win.document.write("<h1>This is it</h1>");
win.document.write("</body>");
win.document.write("</html>");

or even

var win = window.open('','newWindow');
var header = win.document.createElement("H1");
header.innerHTML = "This is it";
header.style.backgroundColor="red";
win.document.body.appendChild(header);

but both of those solutions seem rather clunky. I know that people use AJAX to request data from different sources to generate some on screen content. I know that there are tools like Node.js, JQuery, and Angular which are used by some individuals to create HTML/JS/CSS content. I just get the feeling that there is a better method that I just haven't run into yet.

So, here's the scenario. You have a large set of data that you can pull from, let's say a library of book titles, authors, etc and for simplicity sake let's just put all of that in a .js file with a single JSON data object.

var library = {
  "Anne of Green Gables": {"Author": "Lucy Maud Montgomery", "Date":1908...},
  ...
};

I want to allow the user to browse a list of the books, select one and autogenerate a new page with the contents of that record. Maybe something where I can put book descriptions, etc. Maybe something like https://bookaudio.online.

How would you dynamically generate those pages?

I can think of several ways I might do it, but they all feel like I'm using 1990's techniques. I'm hoping that someone will be able to tell me more about 2020's methods.

Upvotes: 0

Views: 1555

Answers (2)

BSD
BSD

Reputation: 339

In response to another question (https://stackoverflow.com/a/70425478?noredirect=1) a response suggested that pop-up windows are not optimal although still used. New windows with dynamic content didn't have a proper base for relative addresses and he found a solution to that problem. Still, he commented:

"I think you might save yourself some trouble on things like this by NOT using window.open (which got a really bad rap in the bad days of popups) and use a hidden modal div that you can load (or write) html into, then unhide. However, you might have a completely valid reason for using the popup."

That gave me more information and a quick search turned up various articles with some variation on "popup vs modal vs overlay vs interstitial". Apparently these are the four techniques that are used for dynamically adding content and popup is the least preferred as originally suspected.

As an example, this site (https://moz.com/blog/popups-seo-whiteboard-friday) discusses different ways to display dynamic content in-window. The take is specifically aimed at improving search engine ranking, but the description of pros/cons is very helpful. It suggests that the window.open method is probably the least preferred in modern web development. The video also suggests Google as a source for best practices. With that in mind, I found this (https://developers.google.com/search/blog/2016/08/helping-users-easily-access-content-on) 2016 guide from Google on the subject.

So, quite apart from how to dynamically load content onto one of these elements, the preferred method of displaying dynamic conent is probably not a new window.

Upvotes: 0

Tomalak
Tomalak

Reputation: 338228

It's a veteran in the "dynamic front-end libraries" arena, but it hits a very sweet spot in terms of features, shallow learning curve (compared to heavy-hitters such as Vue or Ember), rapid prototyping, extensibility, and virtually non-existent "secondary tooling" requirements: Knockout.js

function BookList(data) {
  this.books = data.books;
  this.selectedBook = ko.observable();
  this.selectBoxTitle = ko.pureComputed(() => `There are ${this.books.length} books, pick one!`);
}

var data = {
  books: [
    {Title: "Anne of Green Gables", Author: "Lucy Maud Montgomery", Date: 1908},
    {Title: "Wuthering Heights", Author: "Emily Brontë", Date: 1847},
    {Title: "Dracula", Author: "Bram Stoker", Date: 1897},  
  ]
};

ko.applyBindings(new BookList(data));
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>

<select data-bind="
  options: books,
  optionsText: 'Title',
  optionsCaption: selectBoxTitle,
  value: selectedBook
"></select>

<div data-bind="with: selectedBook">
  <h3 data-bind="text: Title"></h3>
  <p>Written by <b data-bind="text: Author"></b> in <span data-bind="text: Date"></span>.</p>
</div>

<hr>
View Model:
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

Upvotes: 1

Related Questions