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

Question

When I click an item in a table, I need it to add that item to a list and display that list.

Here's my code for adding/displaying the items in the list:

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

    function addItemToList(id) {

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

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

    };

This works great, but I also need to add a "delete" button to each item in the list.

But when I add + ' <a href="#">delete</a>' to the createTextNode() parameter, it doesn't work. This is because, obviously, textNodes can only have plain text.

So how do I make this code work with the HTML tag? Is there any JS or Jquery method other than createTextNode() that will do the same thing, but allow HTML tags?

Answer 1

With the specific scenario you mention, you would just set innerHTML of the li

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

Otherwise, either create the element like you did for the li, but using an a instead, and append it. Or just use insertAdjacentHTML() to append the whole thing

Creating the element

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

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

Using insertAdjacentHTML

entry.insertAdjacentHTML('beforeend',id + ' <a href="#">delete</a>');

Demo

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>

Also since you tagged jQuery, you can do the same thing as insertAdjacentHTML but by calling jQuery's append() method

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