javascript - 使用 createTextNode() 但我需要向其添加 HTML 标签 (JavaScript/JQuery)

Question

当我单击表格中的项目时，我需要它来将该项目添加到列表并显示该列表。

这是我在列表中添加/显示项目的代码:

    var myList = document.getElementById('my-list');

    function addItemToList(id) {

        var entry = document.createElement('li');

        entry.appendChild(document.createTextNode(id));
        myList.appendChild(entry);

    };

效果很好，但我还需要为列表中的每个项目添加一个“删除”按钮。

但是当我添加 + ' <a href="#">delete</a>'到 createTextNode()参数，它不起作用。这是因为，显然，textNodes 只能有纯文本。

那么如何让这段代码与 HTML 标签一起工作呢？除了createTextNode() 是否有任何JS或Jquery方法这会做同样的事情，但允许 HTML 标签？

Answer 1

根据您提到的特定场景，您只需设置 li

的 innerHTML

entry.innerHTML = id + ' <a href="#">delete</a>'

否则，要么像为 li 那样创建元素，但使用 a 代替，然后附加它。或者只使用 insertAdjacentHTML() 来附加整个内容

创建元素

var entry = document.creatElement('li');
entry.appendChild(document.createTextNode(id));

var link = document.createElement('a');
link.href = "#";
link.innerText = "delete";
entry.appendChild(link);

使用 insertAdjacentHTML

entry.insertAdjacentHTML('beforeend',id + ' <a href="#">delete</a>');

演示

var id = "Some Text";
var list = document.querySelector("ul");
var entry = document.createElement("li");
entry.insertAdjacentHTML("beforeend", `${id} <a href="#">delete</a>`);

list.appendChild(entry);

<ul></ul>

此外，由于您标记了 jQuery，因此您可以通过调用 jQuery 的 append() 方法来执行与 insertAdjacentHTML 相同的操作

$(entry).append( id + ' <a href="#">delete</a>' );