Using Javascript Template Literals With The prepend() Method

Question

I have a loop of button elements that are outputted with a while loop from data called from a MySQL database via PHP.

A user can add a button to this list and I want to add the new button and it's associated HTML using the prepend() method on the parent element, so it appears at the top of the list.

I know how to do this in various stages using createElement and adding class names and attribute names, but wondered if there is a simpler way of doing it using a template literal of the required HTML?

I've seen plenty of examples using parentElement.innerHTML(variableName), where variableName is the template literal, but these button elements illustrated below are inside a loop, and want I to prepend the newly created button to the parent .board-list element shown in the HTML.

When a new board name is submitted, a fetch() post request happens in the background to update the database, but I need to create a new element with JavaScript so this shows instantly to the user.

At the moment the template literal newButton is added to the HTML inside quote marks as a string of text, not as HTML DOM elements.

JavaScript

// added into the template literal below
const newBoardName = document.querySelector('.input-title').value;

const newButton = `
<button class="board-list-item full-width" name="board-name" type="submit">
    <span>${newBoardName}</span>
    <span class="add-icon flex">+</span>
</button>
`

document.querySelector(".board-list").prepend(newButton);

HTML

<div class="board-list">

// buttons outputted from the database appear here

</div>

<form>
    <input class="input-title">
    <button name="new-board-name">New Board Name</button>
<form>

Does this answer your question? [Convert a es6 template string to html element using vanilla javascript](https://stackoverflow.com/questions/42372432/convert-a-es6-template-string-to-html-element-using-vanilla-javascript) — pilchard, May 09 '22 at 21:39
strings dont turn automatically into element nodes https://developer.mozilla.org/en-US/docs/Web/API/Element/prepend — The Fool, May 09 '22 at 21:45
also: [Creating a new DOM element from an HTML string using built-in DOM methods or Prototype](https://stackoverflow.com/questions/494143/creating-a-new-dom-element-from-an-html-string-using-built-in-dom-methods-or-pro) — pilchard, May 09 '22 at 22:01

score 0 · Answer 1 · answered May 09 '22 at 21:56

I think a simple solution is to use .innerHTML, here is an example:

// added into the template literal below
const newBoardName = document.querySelector('.input-title').value;

const newButton = `
<button class="board-list-item full-width" name="board-name" type="submit">
    <span>${newBoardName}</span>
    <span class="add-icon flex">+</span>
</button>
`

let boardList = document.querySelector(".board-list");
boardList.innerHTML = newButton + boardList.innerHTML;

<div class="board-list">

// buttons outputted from the database appear here

</div>

<form>
    <input class="input-title" value="user1">
    <button name="new-board-name">New Board Name</button>
<form>

This is simply to answer your question, although it is not the best solution, so I do not see it recommended.

pjk_ok · Accepted Answer · 2022-05-11T17:02:24.853

-1

The solution to this was using the insertAdjacentHTML method. The question/answer given in one of the comments helped me on this, but I don't think it is a duplicate question, and the question linked to has an overly complicated answer IMHO.

// added into the template literal below
const newBoardName = document.querySelector('.input-title').value

const newButton = `
<button class="board-list-item full-width" name="board-name" type="submit">
    <span>${newBoardName}</span>
    <span class="add-icon flex">+</span>
</button>
`

// insert using 'afterbegin' to add as the first child element
document.querySelector(".board-list").insertAdjacentHTML('afterbegin', newButton)

edited May 11 '22 at 17:02

answered May 09 '22 at 21:55

pjk_ok

618
7
35
90

It's a duplicate, just close it as such (and the comments link to yet another [Creating a new DOM element from an HTML string using built-in DOM methods or Prototype](https://stackoverflow.com/questions/494143/creating-a-new-dom-element-from-an-html-string-using-built-in-dom-methods-or-pro)) – pilchard May 09 '22 at 22:00

Using Javascript Template Literals With The prepend() Method

2 Answers2