5

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

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

    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 标签？

4

3 回答 3

7

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>');

演示

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>

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

$(entry).append( id + ' <a href="#">delete</a>' );
于 2016-12-16T19:56:19.677 回答
5

一种可能性是：

function addItemToList(id) {

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

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

};
于 2016-12-16T19:54:17.197 回答
2

我不确定您使用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>

于 2016-12-16T19:56:26.073 回答