How to add <li> element with <i> element to <ul> 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;
});

<html>

<head>
  <title>TODO supply a title</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Josefin+Sans:400,700&amp;subset=latin-ext" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">


</head>

<body>
  <div class="wrapper">
    <h1>Dodaj nowe zadanie do listy</h1>
    <div class="to-do-container">
      <div class="input-data">
        <input id="new-task" type="text">
        <button id="add-button" type="button">Dodaj</button>
      </div>
      <ul id="tasks">
        <li>Zadzwonić do...<i class="fas fa-times"></i></li>
        <li>Odebrać dzieci z...<i class="fas fa-times"></i></li>
        <li>Kupić na obiad...<i class="fas fa-times"></i></li>
        <li>Umówić się na...<i class="fas fa-times"></i></li>
        <li>Załatwić na mieście...<i class="fas fa-times"></i></li>
        <li>Spotkać się z...<i class="fas fa-times"></i></li>
      </ul>
    </div>
  </div>


</body>

</html>

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.

Are you enable to use jQuery ??

Zakaria Acharki
– Zakaria Acharki

2018-09-06 10:50:05 +00:00
Commented Sep 6, 2018 at 10:50 — Zakaria Acharki
– Zakaria Acharki, Commented Sep 6, 2018 at 10:50

Rory McCrossan · Accepted Answer · 2018-09-06 10:50:10Z

1

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

<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Josefin+Sans:400,700&amp;subset=latin-ext" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<div class="wrapper">
  <h1>Dodaj nowe zadanie do listy</h1>
  <div class="to-do-container">
    <div class="input-data">
      <input id="new-task" type="text">
      <button id="add-button" type="button">Dodaj</button>
    </div>
    <ul id="tasks">
      <li>Zadzwonić do...<i class="fas fa-times"></i></li>
      <li>Odebrać dzieci z...<i class="fas fa-times"></i></li>
      <li>Kupić na obiad...<i class="fas fa-times"></i></li>
      <li>Umówić się na...<i class="fas fa-times"></i></li>
      <li>Załatwić na mieście...<i class="fas fa-times"></i></li>
      <li>Spotkać się z...<i class="fas fa-times"></i></li>
    </ul>
  </div>
</div>

answered Sep 6, 2018 at 10:50

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

2 Comments

blosiu Over a year ago

I have also gone further...and want to delete <li> element when clicked on <i> element. I have code like this and it doesn't work. Please notice that I am still learning JS :-) Thank you in advance for help. var remove = document.querySelectorAll(".fas"); remove.addEventListener("click", function () { for(var i = 0; i < remove.length; i++){ remove[i].classList.remove('remove-list'); } });

Rory McCrossan Over a year ago

I would suggest starting a new question, as that's about a completely different topic.

Nisarg Shah · Accepted Answer · 2018-09-06 10:48:48Z

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 <li> element.
li.innerText = input.value;

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

// Append the <li> element to <ul> 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 = "";
});

<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Josefin+Sans:400,700&amp;subset=latin-ext" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<div class="wrapper">
  <h1>Dodaj nowe zadanie do listy</h1>
  <div class="to-do-container">
    <div class="input-data">
      <input id="new-task" type="text" />
      <button id="add-button" type="button">Dodaj</button>
    </div>
    <ul id="tasks">
      <li>Zadzwonić do...<i class="fas fa-times"></i></li>
      <li>Odebrać dzieci z...<i class="fas fa-times"></i></li>
      <li>Kupić na obiad...<i class="fas fa-times"></i></li>
      <li>Umówić się na...<i class="fas fa-times"></i></li>
      <li>Załatwić na mieście...<i class="fas fa-times"></i></li>
      <li>Spotkać się z...<i class="fas fa-times"></i></li>
    </ul>
  </div>
</div>

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

Bhushan Kawadkar · Accepted Answer · 2018-09-06 10:49:19Z

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

<html>

<head>
  <title>TODO supply a title</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Josefin+Sans:400,700&amp;subset=latin-ext" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">


</head>

<body>
  <div class="wrapper">
    <h1>Dodaj nowe zadanie do listy</h1>
    <div class="to-do-container">
      <div class="input-data">
        <input id="new-task" type="text">
        <button id="add-button" type="button">Dodaj</button>
      </div>
      <ul id="tasks">
        <li>Zadzwonić do...<i class="fas fa-times"></i></li>
        <li>Odebrać dzieci z...<i class="fas fa-times"></i></li>
        <li>Kupić na obiad...<i class="fas fa-times"></i></li>
        <li>Umówić się na...<i class="fas fa-times"></i></li>
        <li>Załatwić na mieście...<i class="fas fa-times"></i></li>
        <li>Spotkać się z...<i class="fas fa-times"></i></li>
      </ul>
    </div>
  </div>


</body>

</html>

Stuart · Accepted Answer · 2018-09-06 10:51:17Z

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

<html
<head>
  <title>TODO supply a title</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Josefin+Sans:400,700&amp;subset=latin-ext" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
<body>
  <div class="wrapper">
    <h1>Dodaj nowe zadanie do listy</h1>
    <div class="to-do-container">
      <div class="input-data">
        <input id="new-task" type="text">
        <button id="add-button" type="button">Dodaj</button>
      </div>
      <ul id="tasks">
        <li>Zadzwonić do...<i class="fas fa-times"></i></li>
        <li>Odebrać dzieci z...<i class="fas fa-times"></i></li>
        <li>Kupić na obiad...<i class="fas fa-times"></i></li>
        <li>Umówić się na...<i class="fas fa-times"></i></li>
        <li>Załatwić na mieście...<i class="fas fa-times"></i></li>
        <li>Spotkać się z...<i class="fas fa-times"></i></li>
      </ul>
    </div>
  </div>
</body>
</html>

Sudhakar Webist · Accepted Answer · 2018-09-06 11:07:14Z

1

Problem is you are appending html object into <ul>. Try Something like this

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 + '<i class="fas fa-times"></i>';
});

edited Sep 6, 2018 at 11:07

answered Sep 6, 2018 at 11:04

Sudhakar Webist

113 bronze badges

Comments

Jan Andersen · Accepted Answer · 2018-09-06 15:14:11Z

1

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("<li>" + $('#new-task').val() + "<i></i></li>");
   });
});

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("?")));
   });
});

answered Sep 6, 2018 at 15:14

Jan Andersen

7731 gold badge6 silver badges13 bronze badges

Collectives™ on Stack Overflow

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

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related