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

Question

当我单击 table 中的某个项目时，我需要将其添加到列表并显示该列表。

这是我的 adding/displaying 列表中项目的代码：

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

    function addItemToList(id) {

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

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

    };

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

但是当我将+ ' <a href="#">delete</a>'添加到createTextNode()参数时，它不起作用。这是因为，显然，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>

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

Using createTextNode() but I need to add HTML tags to it (JavaScript/JQuery)

html

javascript

jquery

list

createtextnode