使用 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 标签一起工作呢？是否有任何 JS 或 Jquery 方法createTextNode()可以做同样的事情，但允许 HTML 标签？

Answer 1

随着你提到的具体情况，你只需设置innerHTML的li

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

否则，要么像为 一样创建元素li，但使用 ana代替，然后附加它。或者只是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>');

演示

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

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

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

此外，由于您标记了 jQuery，您可以insertAdjacentHTML通过调用 jQuery 的append()方法来做同样的事情

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

Answer 2

一种可能性是：

function addItemToList(id) {

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

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

};

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>