使用 createElement() 将 JS 中的 HTML 元素转换为要创建的元素

Question

I'm trying to convert a part of code I built, in JS to use more clean solutions. I used to return HTML tags as follow:

return `<option value="${o.id}">${o.name}</option>`;

My goal is to use the create element or another way to write this differently to look cleaner.

this tag is a par of a map:

var selectOptions = response.map(o => {
                return `<option value="${o.id}">${o.name}</option>`;
            });

I would like to understand how to convert this doing like:

var x = document.createElement("option")
var value = "option value";
var text = "option.text"
And append

Or another way more useful in my example.

Answer 1

You can crate an Node wrapper with document.createElement("div") and attach the template String created with node.innerHTML = template ;

const createNodeFromTemplate = (template, wrapper, wrapperAttrs) => {
  const node = document.createElement(wrapper);
  for (const [key, value] of Object.entries(wrapperAttrs)) {
    node.setAttribute(key, value);
  }
  node.innerHTML = template;
  return node;
};