使用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);

    };

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

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

那么如何使这个代码与HTML标签一起使用呢？ 除了createTextNode()之外是否有任何JS或Jquery方法可以执行相同的操作，但允许使用HTML标记？

Answer 1

一种可能性是：

function addItemToList(id) {

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

    entry.innerHTML = id + '<a href="#">delete</a>';
    myList.appendChild(entry);

};

Answer 2

根据您提到的具体方案，您只需设置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，您可以执行与insertAdjacentHTML相同的操作，但是通过调用jQuery的append()方法

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

Answer 3

我不确定你是否有任何特殊原因使用createTextNode()或避免使用jQuery选择器，但如果只是因为你是jQuery整体新手，那么这个代码片段会有一些更新的更好的实践并解决你的问题。 希望能帮助到你！

 var $myList = $('#my-list'); function addItemToList(id) { var $deleteLink = $('<a href="#">Delete</a>'); $deleteLink.on('click', function(e) { e.preventDefault(); $(this).parent().remove() }) var $entry = $('<li>'+id+'</li>') $entry.append($deleteLink) $myList.append($entry); }; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="my-list"> </ul> <a href="#" onClick="addItemToList(1)">Add Item</a>