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

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?

I'm not sure if there are any particular reasons you're using createTextNode() or avoiding jQuery selectors, but if it's simply because you're new to jQuery overall, than this code snippet has some updates with better practices and solves your problem. Hope it helps!

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>