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

Posted 2023-05-07

【中文标题】使用 createTextNode() 但我需要向其添加 HTML 标记 (JavaScript/JQuery)

【英文标题】：Using createTextNode() but I need to add HTML tags to it (JavaScript/JQuery)

【发布时间】：2017-05-02 15:59:37

【问题描述】：

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

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

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

【问题讨论】：

为什么您需要 createTextNode 来获取在您的案例中是删除按钮的元素。 ?使用createElement("BUTTON")

【参考方案1】：

根据您提到的具体场景，您只需设置innerHTML 的li

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

【讨论】：

$id是jquery

@Mahi，不是在使用Template literals，它允许在字符串中使用表达式

【参考方案2】：

一种可能性是：

function addItemToList(id) 

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

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

;

【参考方案3】：

我不确定您使用createTextNode() 或避免使用 jQuery 选择器是否有任何特殊原因，但如果仅仅是因为您是 jQuery 的新手，那么这段代码 sn-p 有一些更好的更新实践并解决您的问题。希望对您有所帮助！

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>

【讨论】：

效果很好！感谢您还包括删除功能！