通过 prepend() 方法使用 Javascript 模板文字

Question

我有一个按钮元素循环，通过 PHP.

从 MySQL 数据库调用的数据以 while 循环输出

用户可以向该列表添加一个按钮，我想添加新按钮，并且它在父元素上使用 prepend() 方法与 HTML 关联，因此它出现在列表。

我知道如何在各个阶段使用 createElement 并添加 class 名称和属性名称来执行此操作，但想知道是否有更简单的方法使用所需 [=38= 的模板文字来执行此操作]?

我见过很多使用 parentElement.innerHTML(variableName) 的示例，其中 variableName 是模板文字，但下面说明的这些按钮元素在一个循环中，并且希望我将新创建的按钮添加到HTML.

中显示的父 .board-list 元素

当提交新的板名时，后台会发生 fetch() post 请求以更新数据库，但我需要使用 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

这个问题的解决方案是使用 insertAdjacentHTML 方法。其中一条评论中给出的 question/answer 在这方面对我有所帮助，但我不认为这是一个重复的问题，并且链接到的问题的答案过于复杂恕我直言。

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

Answer 2

我认为一个简单的解决方案是使用 .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>

这只是回答你的问题，虽然它不是最好的解决方案，所以我不推荐它。

通过 prepend() 方法使用 Javascript 模板文字

Using Javascript Template Literals With The prepend() Method

javascript

prepend

template-literals