Save an element created with multiple attributes – JavaScript – SitePoint Forums

I don’t know if it’s possible, and it doesn’t seem very practical to me.

For example, here is a simple fragment with a title. You can copy it to your browser console and see the result.

const fragment = new DocumentFragment()
const heading = document.createElement('h1')
heading.textContent="Read all about it!"
fragment.appendChild(heading)

console.dir(fragment)

This is only a small part of this disconnected fragment

baseURI: "chrome://new-tab-page/"
childElementCount: 1
childNodes: NodeList(1)
0: h1
length: 1
[[Prototype]]: NodeList
  entries: ƒ entries()
  forEach: ƒ forEach()
  item: ƒ item()
  keys: ƒ keys()
  length: (...)
  values: ƒ values()
  constructor: ƒ NodeList()
  Symbol(Symbol.iterator): ƒ values()
  Symbol(Symbol.toStringTag): "NodeList"
  get length: ƒ length()
  [[Prototype]]: Object
children: HTMLCollection(1)
  0: h1
  length: 1
  [[Prototype]]: HTMLCollection
    item: ƒ item()
    length: (...)
    namedItem: ƒ namedItem()
    constructor: ƒ HTMLCollection()
    Symbol(Symbol.iterator): ƒ values()
    Symbol(Symbol.toStringTag): "HTMLCollection"
    get length: ƒ length()
    [[Prototype]]: Object
...

Well, that definitely excludes json, because json only copies array values, objects and primitives, no functions, e.g. inputs, forEach, etc.

You then built prototypes NodeLists, HTMLCollection and symbols, getters and setters.

I’m not sure it would even be possible to store this in a database.

This is instead of maybe storing a string pattern and parsing it.

'

Read all about it!

'

Alternative?
Another idea, if you want to stick with explicitly creating elements, is to possibly represent the process as an object.

If you look at React’s createElement, that might give us an idea.

React.createElement(
  "div",
  { className: "red" },
  React.createElement("div", { className: "blue" }) <-- child element
)

You can store a nested object, a base representation of your Dom elements, and then loop through it later creating your actual DOM elements.

Store only data instead?
That’s what I would go with. I know I sound like a broken record here, but when recovering I would feed this data into html template strings.

James S. Joseph