使用prepend（）方法使用JavaScript模板文字

Question

我有一个按钮元素的循环，这些元素用输出，而循环通过PHP从MySQL数据库中调用的数据循环。

用户可以在此列表中添加一个按钮，我想添加新按钮，并且使用prepend（）方法在父元素上关联了HTML，因此它显示在列表的顶部。

我知道如何使用CreateElement并添加类名称和属性名称在各个阶段进行此操作，但是想知道是否有一种更简单的方法使用所需的HTML的模板来执行此操作？

我已经看到了使用parentElement.innerhtml（variablename）的大量示例，其中variablename是模板字面的字面形式，但是下面说明的这些按钮元素在循环内，并希望我在parent .board中预先将新创建的按钮预留到parent .board -LIST html中显示的元素。

提交新的板名称时，在后台发生了一个fetch（）邮政请求以更新数据库，但是我需要使用JavaScript创建一个新元素，因此这立即向用户显示。

目前，模板文字newbutton被添加到引用标记的HTML中，作为文本字符串，而不是HTML DOM元素。

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>

Answer 1

我认为一个简单的解决方案是使用.innerhtml，这是一个示例：

// 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>
  

这仅仅是为了回答您的问题，尽管它不是最好的解决方案，所以我认为它没有推荐。

Answer 2

解决方案是使用insertadjacenthtml方法。其中一条评论中给出的问题/答案对我有所帮助，但我认为这不是一个重复的问题，而与之相关的问题有一个过于复杂的答案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)