How to add
element with element to
after click in java script

Question

I have small problem with adding element (close button) to after click in java script.

Here is the code:

var add = document.getElementById("add-button");
add.addEventListener("click", function() {
  var ul = document.getElementById("tasks");
  var input = document.getElementById("new-task").value;

  var li = document.createElement("li");
  ul.appendChild(li);

  var i = document.createElement("i");
  ul.appendChild(i);

  li.innerHTML = input + i;
});




  TODO supply a title
  
  
  
  





  
    Dodaj nowe zadanie do listy
    
      
        
        
      
      
        Zadzwonić do...
        Odebrać dzieci z...
        Kupić na obiad...
        Umówić się na...
        Załatwić na mieście...
        Spotkać się z...

It gives me "HTML Element Object". I am now learning Js using simple tasks, but here I think there is small detail.

Thanks for help in advance.

user_5894241 · Answer

You don't really need innerHTML for this one.¹ There are two major tasks, (1) setting the text of li element and (2) setting the icon on i element.

They can be done as follows:

// Create the elements.
var li = document.createElement("li");
var i = document.createElement("i");

// Set font-awesome icon.
i.className = "fas fa-times";

// Set the text of  element.
li.innerText = input.value;

// Append the icon into 
 element.
li.appendChild(i);

// Append the  element to  element.
ul.appendChild(li);

Here's a working snippet:

var add = document.getElementById("add-button");
add.addEventListener("click", function() {
  var ul = document.getElementById("tasks");
  var input = document.getElementById("new-task");

  var li = document.createElement("li");
  var i = document.createElement("i");
  i.className = "fas fa-times";
  li.innerText = input.value;
  li.appendChild(i);
  ul.appendChild(li);

  // Clear the input once done.
  input.value = "";
});





  Dodaj nowe zadanie do listy
  
    
      
      
    
    
      Zadzwonić do...
      Odebrać dzieci z...
      Kupić na obiad...
      Umówić się na...
      Załatwić na mieście...
      Spotkać się z...

1 - innerHTML is usually undesired because of its vulnerability to XSS attacks: XSS prevention and .innerHTML

user_649504 · Answer

you can try below code where you need to append li to ul and assign input value to li first. Create i, assign required class and then append it to li

var add = document.getElementById("add-button");
add.addEventListener("click", function() {
  var ul = document.getElementById("tasks");
  var input = document.getElementById("new-task").value;

  var li = document.createElement("li");
  ul.appendChild(li);
  li.innerHTML = input;
  
  var i = document.createElement("i");
  i.className = "fas fa-times";
  li.appendChild(i);
});




  TODO supply a title
  
  
  
  





  
    Dodaj nowe zadanie do listy
    
      
        
        
      
      
        Zadzwonić do...
        Odebrać dzieci z...
        Kupić na obiad...
        Umówić się na...
        Załatwić na mieście...
        Spotkać się z...

user_519413 · Answer

You're seeing [object HTMLElement] as you're attempting to append an Element object through the use of innerHTML, which coerces it to a string. You instead need to set the input text value using innerText, then appendChild() for the i element, as you already are in other places.

Also note that you need to add the classes to the i which can be done by using classList.add(). Try this:

var add = document.getElementById("add-button");
add.addEventListener("click", function() {
  var i = document.createElement("i");
  i.classList.add('fas', 'fa-times');

  var li = document.createElement("li");
  var input = document.getElementById("new-task").value;
  li.innerText = input;
  li.appendChild(i);
  
  var ul = document.getElementById("tasks");
  ul.appendChild(li);
});




  Dodaj nowe zadanie do listy
  
    
      
      
    
    
      Zadzwonić do...
      Odebrać dzieci z...
      Kupić na obiad...
      Umówić się na...
      Załatwić na mieście...
      Spotkać się z...

user_1654231 · Answer

You need to append the i using appendChild:

var add = document.getElementById("add-button");
add.addEventListener("click", function() {
  var ul = document.getElementById("tasks");
  var input = document.getElementById("new-task").value;

  var li = document.createElement("li");
  var i = document.createElement("i");
  i.classList += ' fas fa-times';

  li.innerHTML = input;
  li.appendChild(i);
  
  ul.appendChild(li);
});


  TODO supply a title
  
  
  
  


  
    Dodaj nowe zadanie do listy
    
      
        
        
      
      
        Zadzwonić do...
        Odebrać dzieci z...
        Kupić na obiad...
        Umówić się na...
        Załatwić na mieście...
        Spotkać się z...

user_10324804 · Answer

Problem is you are appending html object into

var add = document.getElementById("add-button");
add.addEventListener("click", function () {
  var ul = document.getElementById("tasks");
  var input = document.getElementById("new-task").value;

  var li = document.createElement("li");
  ul.appendChild(li);

  li.innerHTML = input + '';
});

user_7357771 · Answer

Since you've tagged your question with JQuery... Or, erm, at least I thought I saw it present earlier.

You could also do it like this:

$(document).ready(function () {
   $('#add-button').click(function () {
        $('#tasks').append("" + $('#new-task').val() + "");
   });
});

Or if you want to use createElement instead of adding raw text:

$(document).ready(function () {
   $('#add-button').click(function () {
       $('#tasks').append(($(document.createElement("li")).html(
          $('#new-task').val())).append($(document.createElement("i")).html("?")));
   });
});

How to add <li> element with <i> element to <ul> after click in java script

6 Answers