当我单击表格中的项目时,我需要它来将该项目添加到列表并显示该列表。
这是我在列表中添加/显示项目的代码:
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 标签?
最佳答案
根据您提到的特定场景,您只需设置 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,因此您可以通过调用 jQuery 的 append()
方法来执行与 insertAdjacentHTML
相同的操作
$(entry).append( id + ' <a href="#">delete</a>' );
关于javascript - 使用 createTextNode() 但我需要向其添加 HTML 标签 (JavaScript/JQuery),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41191445/