How can I append HTML code using JavaScript?

Question

I'm trying to add an element to the DOM using JavaScript. I have a ul and I want to add a li. Its nothing difficult using appendChild but I want my li to be more complicated.

This is the output that I'm trying to achieve:

<li>
  <span class="author">Me</span>
  <span class="message">Message...</span>
  <span class="time">
    <div class="line"></div>
    15:21
  </span>
</li>

let author = "me";
let message = "Message...";
let time = "15:21";

As you can see what I'm trying to achieve isn't just a basic li with some text (innerHTML) but quite a big chunk of HTML code.

My question is how I can achieve to get this output using JavaScript. Or should I use some JavaScript library or something to make it easier?

Please post your attempt. If you click edit and then `[<>]` snippet editor you can give us a [mcve] — mplungjan, Mar 17 '20 at 12:48
But in the end this is still invalid markup. A `
` is not a valid child of a [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span) — Andreas, Mar 17 '20 at 12:50
why would you put a
into a ?? a span is an inline element, while a div is a block element. this is bad code — Iamnino, Mar 17 '20 at 12:51
@Andreas I'm still a junior developer and I was thinking if there was a better solution for my problem. Like JSX in React so I could write HTML inside javascript. And thanks for telling me about the ``. — Michal K, Mar 17 '20 at 12:54
`div` is perfectly valid child in a span, provided its CSS property `display` was set to `inline`. — Teemu, Mar 17 '20 at 12:54
The larger question is: why is OP using a `
` as a presentational element (inferred from its class name) instead of CSS? — David Thomas, Mar 17 '20 at 13:01

score 6 · Accepted Answer · answered Mar 17 '20 at 12:53

6

Take a look at this original link for that code where we append to the DOM. Then you can use string interpolation to add the variables to the code like below

function appendHtml(el, str) {
  var div = document.createElement('div'); //container to append to
  div.innerHTML = str;
  while (div.children.length > 0) {
    el.appendChild(div.children[0]);
  }
}

let author = "me";
let message = "Message...";
let time = "15:21";

var html = `<li><span class="author">${author}</span><span class="message">${message}</span><span class="time"><div class="line"></div>${time}</span></li>`;
appendHtml(document.body, html);

answered Mar 17 '20 at 12:53

PEPEGA

2,214
20
37

1

Thank you this is exactly what I was looking for. – Michal K Mar 17 '20 at 12:57
It does produce invalid HTML, though, as an `
` element has only a `

David Thomas

Mar 17 '20 at 12:58

@MichalK So `.appendChild()` is the solution? You also already mentioned `.innerHTML`. So the both steps this "answer" uses to solve your problem. How can this be the answer? o.O – Andreas Mar 17 '20 at 12:59

@Andreas I think op was looking for string interpolation – PEPEGA Mar 17 '20 at 13:04

@DavidsaysreinstateMonica Well that's irrelevant isn't it? Just took what output op wanted and applied it – PEPEGA Mar 17 '20 at 13:05

1

No, I don’t think it is. The point of the site is to make the internet a better place, and teach how to do things better. Creating invalid HTML - without even pointing that problem out in the answer - seems like poor practice. But it’s your answer, and you’re absolutely entitled to disagree with me. – David Thomas Mar 17 '20 at 13:18

Umair Khan · Answer 2 · 2020-03-17T13:05:31.450

If you want to insert html elements string as html node, you have to create html elements to use with appendChild()

However insertAdjacentHTML() allows you to add html elements if passed as string. https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

let author = "me";
let message = "Message...";
let time = "15:21";
let str = `<li><span class="author">${author}</span><span class="message">${message}</span><span class="time"><div class="line"></div>${time}</span></li>`;
document.querySelector('#nav').insertAdjacentHTML('beforeend', str);

<ul id='nav'><ul>

let html = `<li>
  <span class="author">Me</span>
  <span class="message">Message...</span>
  <span class="time">
    <div class="line"></div>
    15:21
  </span>
</li>`;
document.querySelector('#list').insertAdjacentHTML('beforeend', html);

<ul id='list'></ul>

In your second example there's no point in using a template literal. — Andy, Mar 17 '20 at 13:07
@Andy I used template literal to deal with new line / line breaks. — Umair Khan, Mar 17 '20 at 18:45

Andy · Answer 3 · 2020-03-17T13:07:47.793

You can use a template literal and insertAdjacentHTML for a clean approach.

function createListItem({ author, message, time }) {
  return `<li>
    <span class="author">${author}</span>
    <span class="message">${message}</span>
    <span class="time">
      <div class="line"></div>
      ${time}
    </span>
  </li>`;
}

const ul = document.querySelector('ul');

ul.insertAdjacentHTML('beforeend', createListItem({
  author: 'me',
  message: 'Message...',
  time: '15:21'
}));

.line { display: inline };

<ul>
  <li>Current</li>
</ul>

Mister Jojo · Answer 4 · 2020-03-17T13:16:46.437

the more simple, (for me)

const DomParser = new DOMParser()

function makeLI( author, message, time)
  {
  let ElemLI =
    `<li>
      <span class="author">${author}</span>
      <span class="message">${message}</span>
      <span class="time">
        <div class="line"></div>
        ${time}
      </span>
    </li>`
  return (DomParser.parseFromString( ElemLI, 'text/html')).body.firstChild
  }


// proof...
myList.appendChild(makeLI('you','Message...','15:21'))
myList.appendChild(makeLI('me','someone in ?','21:25'))

<ul id="myList"></ul>

Keith · Answer 5 · 2020-03-17T13:45:46.017

Here is a little trick you can use.

You can actually use existing DOM (HTML) as a kind of template, basically clone the element and then replace the parts with the values you want.

First you remove the Element from the DOM with the remove, although the element has be removed from the DOM, it doesn't stop you from cloning it.

Now whenever you want another one, call clone(true), true = deepClone, and the using querySelector replace parts of the DOM with the bits you want. Finally add this cloned element to the DOM.

Below is a simple example..

const ol = document.querySelector('ol');
const template = document.querySelector('li');
template.remove();

function append(o) {
  const {author, message, time} = o;
  const clone = template.cloneNode(true);
  clone.querySelector('.author').innerText=author;
  clone.querySelector('.message').innerText=message;
  clone.querySelector('.time').lastChild.nodeValue=time;
  ol.appendChild(clone); 
}

append({
  author: "me",
  message: "Message...",
  time: "15:21"
});

append({
  author: "Another me",
  message: "Something else..",
  time: "12:42"
});

append({
  author: "Whatever",
  message: "lalala..",
  time: "17:20"
});

.author {
  font-weight: bold;
  margin-right: 1rem;
}
.time {
  color: green;
}
li {
  margin: 0.5rem;
  border: 1px solid silver;
}
.line {
  border-bottom: 1px dotted red;
}

<ol>
  <li>
    <span class="author">Me</span>
    <span class="message">Message...</span>
    <span class="time">
      <div class="line"></div>
      15:21
    </span>
  </li>
</ol>

How can I append HTML code using JavaScript?

5 Answers5