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

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>

Answer 2

One possibility would be:

function addItemToList(id) {

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

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

};

Answer 3

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