Is it possible to create a sort of HTML object (even using a framework)

Question

I was wondering if it was possible to create a sort of HTML object instead of copy pasting stuff, I thought of doing it via javascript but wondered if there was an easier way to do it (writing html in JS is a bit tedious).

Basically let's say a have a div like that:

        <div class ="col">
            <div class="Title">
                Title
            </div>
            <div class="Text">
                Text
            </div>
        </div>

Which is the best way, to have some sort of function where you can objectName.create(title, text) or to have a javascript function like Function(title, text) create the element?

baao · Accepted Answer · 2018-06-09T21:54:42.207

You could take the outer element and clone it, change its content and append it back to where you want it. Be advised that this may duplicate ids if your elements should have one.

function createHtml(title, text) {
  const el = document.querySelector('.col').cloneNode(true);
  el.querySelector('.Title').innerText = title;
  el.querySelector('.Text').innerText = text;
  document.body.appendChild(el);
}

createHtml("Foo", "Bar");

<div class="col">
  <div class="Title">
    Title
  </div>
  <div class="Text">
    Text
  </div>
</div>

Another option would be to create the element from scratch

function createElement(title, text) {
  const el = document.createElement('div');
  el.clasName = 'col';
  const titleDiv = document.createElement('div');
  titleDiv.className = 'Title';
  titleDiv.appendChild(document.createTextNode(title));
  const textDiv = document.createElement('div');
  textDiv.className = 'Text';
  textDiv.appendChild(document.createTextNode(text));
  
  el.appendChild(titleDiv);
  el.appendChild(textDiv);
  document.body.appendChild(el);
}

createElement("Foo", "Bar");

Note that there are many frameworks out there (like angular, react, vue, ...) that would do things like that easier/better.

Why is this "safer" (regarding your comment) to the other option? Thank you — Loic BAZIN, Jun 09 '18 at 22:49
Please read the answer to the link I posted. Above is open to xss attacks @LoicBAZIN This here https://stackoverflow.com/a/16860343/3993662. In short, my version escapes the input, with the other answer someone could inject code in your site that can be used for attacks — baao, Jun 09 '18 at 22:50

score 0 · Answer 2 · answered Jun 09 '18 at 22:05

0

It is not so bad to write html in js after template literals became a thing in js, you could do something like this

function addCol(title, text){
  document.querySelector(".list").innerHTML += `
    <div class="col">
       <div class="Title">
           ${title}
       </div>
       <div class="Text">
           ${text}
       </div>
    </div>
  `;
}
addCol("hello", "world");
addCol("foo", "bar");

<div class="list"></div>

answered Jun 09 '18 at 22:05

keja

1,333
1
14
21

Depending on how OP wants to use this code, this could be a security risk. Don't set innerHTML with variable content. https://stackoverflow.com/questions/16860287/security-comparison-of-eval-and-innerhtml-for-clientside-javascript. Look at my answer to see how it's done right – baao Jun 09 '18 at 22:35
ofc you should never trust user data, but if you are worried about XSS you can easily prevent that by sanitising the content before adding it to the template, eg use https://github.com/cure53/DOMPurify like this `
${DOMPurify.sanitize(myVar)}
` – keja Jun 09 '18 at 23:18

Is it possible to create a sort of HTML object (even using a framework)

2 Answers2

${DOMPurify.sanitize(myVar)}