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 — pilchard
– pilchard, Commented May 9, 2022 at 21:39
strings dont turn automatically into element nodes developer.mozilla.org/en-US/docs/Web/API/Element/prepend — The Fool
– The Fool, Commented May 9, 2022 at 21:45
also: Creating a new DOM element from an HTML string using built-in DOM methods or Prototype — pilchard
– pilchard, Commented May 9, 2022 at 22:01

Nelsongt77 · Accepted Answer · 2022-05-09 21:56:48Z

0

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.

answered May 9, 2022 at 21:56

Nelsongt77

561 silver badge3 bronze badges

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

Comments

pjk_ok · Accepted Answer · 2022-05-11 17:02:24Z

-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, 2022 at 17:02

answered May 9, 2022 at 21:55

pjk_ok

1,01611 gold badges56 silver badges112 bronze badges

1 Comment

pilchard Over a year ago

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)

Collectives™ on Stack Overflow

Using Javascript Template Literals With The prepend() Method

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related