Content Object to HTML

A look at how to store multiple lines of content, then convert it to rendered HTML

by Coty Beasley

HTML

<div id="container"></div>

JavaScript

// Parsing function
let parseHTML = function(str) {
  let tmp = document.implementation.createHTMLDocument();
  tmp.body.innerHTML = str;
  return tmp.body.children;
};

// Initial content
let string = ["<h1>Yo</h1>"];
let object = {
  "p1": "this is a story",
  "p2": "all about how",
  "p3": "my life got flipped",
  "p4": "turned upside down"
};

// Add HTML markup
for (var prop in object) {
  content = "<p>" + object[prop] + "</p>";
  string.push(content);
}

// Join all items to a single string
string = string.join('');

// Render
document.getElementById("container").innerHTML = string;