Clean way to write innerHTML with simple Javascript

Question

I have a bunch of list items that need to have tags, classes, and all that. I'm getting the JSON data from the server and building the li items up using appendChild on a ul.

Here's an example function from for building the "lemma" items.

function createLemmaItem(lemma) {
  // bunch of "lemma" attributes -- create the base li
  let total = lemma.forms.length;
  let node = document.createElement("li");
  node.classList.add("lemma-item");
  node.dataset.lemmaId = lemma.id;
  node.dataset.group = lemma.group;
  node.setAttribute("onclick", "activateLemma(this)");

  // set the innerHTML to a long HTML string
  node.innerHTML = `
  <div class="lemma-col-1">
    <label>
      <input type="checkbox" onclick="lemmaToggleAll(this)" checked>
      ${lemma.name}
    </label>
  </div>
  <div class="lemma-col-2">
  ${lemma.latin}
  </div>
  <div class="lemma-col-3">
  ${lemma.homid}
  </div>
  <div class="lemma-col-4">
  <span class="counter">(<span class="total">${total}</span>/<span class="max">${total}</span>)</span>
  </div>`;
  return node;
}

Another example for a "form" item:

function createFormItem(lemma, form) {
  let node = document.createElement("li");
  node.classList.add("form-item");
  node.classList.add("hidden");
  node.dataset.lemmaId = lemma.id;
  node.dataset.group = lemma.group;
  node.innerHTML = `
  <label>
    <input type="checkbox" name="${lemma.name}@${lemma.latin}@${lemma.homid}@${lemma.group}@${form}" onchange="changeCount(this)"checked>
    ${form}
  </label>`
  return node;
}

Then I create the items by using this function to generate each one and then appending it to a ul with appendChild.

This seems pretty messy to me, and gets even messier when I have longer HTML strings. I'm concerned about the readability, maintainability, and fragility of my code when I do it this way.

How do you usually handle long HTML strings like this that are in the middle of JS files (without using a framework)? Is there a canonical way? Put the strings in a separate file or something?

"the strings in another file" won't work with template literals — Jaromanda X
– Jaromanda X, Commented Jul 1, 2021 at 3:42
I'm not sure if it's easy with your code, but you could use <template> elements — Jaromanda X
– Jaromanda X, Commented Jul 1, 2021 at 3:44
@JaromandaX Reading into that now... seems like it might be really useful. edit: AMAZING! This could be exactly what I needed! Thanks, you're a JS Jenius! — user6268172
– user6268172, Commented Jul 1, 2021 at 3:47

CertainPerformance · Accepted Answer · 2021-07-01 03:51:49Z

0

How do you usually handle long HTML strings like this that are in the middle of JS files (without using a framework)? Is there a canonical way? Put the strings in a separate file or something?

Putting distinctly different parts of a script into separate files makes maintainability a lot easier. It's much nicer to be able to, for example, navigate to lemmaHTML.js and change what you need to in it, than to have to control-F through a 500-line or 2500+ line monolithic .js file that contains your entire script.

One way to achieve this is to use ES6 modules. You can make a module that exports a function that creates the HTML string. For example, you could have a createLemmaItem.js file:

export function createLemmaItem(lemma) {
  // ...
}
// nothing else in this file

And do the same thing for createFormItem.js.

To import them, start from a module script, and simply do

import { createLemmaItem } from './createLemmaItem.js';

and use the createLemmaItem identifier as needed.

Another similar approach is to use a module bundler like Webpack to write everything in ES6 modules like above, but to bundle up all your separate files into a single one for production. This enables obsolete browsers like IE to use your code, and will significantly improve connection issues with large applications. (If you have hundreds of modules, making a separate request for each module might well take too long to load for clients.)

Though, if you're at this point where your script is large and you're worried about maintainability, I'd highly recommend looking into a framework like React - I know you said you didn't want to, but something like that that really is the tried-and-true professional approach nowadays, in comparison to vanilla JS DOM manipulation.

answered Jul 1, 2021 at 3:51

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

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

1 Comment

user6268172 Over a year ago

Cool, that's a great reply and honestly a great approach. I think I'll try to combine your approach with using the HTML <template> tags. I'm not sure where the downvotes on the question came from, but SE did warn me that questions like this were downvoted in the past, maybe it's because everyone uses React nowadays. But I want to learn the basics before using a framework.

user6268172 · Accepted Answer · 2021-07-01 04:25:15Z

Much cleaner and simpler with <template>.

Creating forms:

function createFormItem(lemma, form) {
  let template = document.querySelector("#form-item");
  let node = template.content.cloneNode(true);

  let name = document.createTextNode(form);
  node.querySelector("label").append(name);

  let li = node.querySelector("li");
  li.dataset.lemmaId = lemma.id;
  li.dataset.group = lemma.group;
  return node;
}

Creating lemmas:

function createLemmaItem(lemma) {
  let template = document.querySelector("#lemma-item");
  let node = template.content.cloneNode(true);

  let name = document.createTextNode(lemma.name);
  node.querySelector("label").append(name);

  let li = document.querySelector("li");
  li.dataset.lemmaId = lemma.id;
  li.dataset.group = lemma.group;

  let col2 = node.querySelector("div.lemma-col-2");
  let latin = document.createTextNode(lemma.latin);
  col2.append(latin);

  let col3 = node.querySelector("div.lemma-col-3");
  let homid = document.createTextNode(lemma.homid);
  col3.append(homid);

  let count = lemma.forms.length;
  let max = node.querySelector(".max");
  let total = node.querySelector(".total");
  max.innerHTML = count;
  total.innerHTML = count;

  return node;
}

And these can now be put in a separate file to make things even easier.

Collectives™ on Stack Overflow

Clean way to write innerHTML with simple Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related