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?

why you need createTextNode for an element which is delete button in your case. ? use createElement("BUTTON") — Mahi
– Mahi, Commented Dec 16, 2016 at 19:51

Patrick Evans · Accepted Answer · 2016-12-16 19:56:19Z

9

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

answered Dec 16, 2016 at 19:56

Patrick Evans

42.8k6 gold badges81 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mahi Over a year ago

${id} is it jquery

Patrick Evans Over a year ago

@Mahi, no that is making use of Template literals which among a few other things allows for expressions within the string

IAmDranged · Accepted Answer · 2016-12-16 19:54:17Z

6

One possibility would be:

function addItemToList(id) {

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

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

};

answered Dec 16, 2016 at 19:54

IAmDranged

3,0201 gold badge14 silver badges7 bronze badges

Comments

Clay McIlrath · Accepted Answer · 2016-12-16 19:56:26Z

3

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>

answered Dec 16, 2016 at 19:56

Clay McIlrath

6123 silver badges10 bronze badges

1 Comment

Nathan R Over a year ago

Works great! Thanks for also including the deleting function!

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related