CODEWITHSUNDEEP
javascripthtmlfunctiononclick
blosiu
blosiu

Reputation: 53

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

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.

Upvotes: 3

Views: 1096

Answers (6)

Jan Andersen
Jan Andersen

Reputation: 773

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

Upvotes: 1

Sudhakar Webist
Sudhakar Webist

Reputation: 11

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

Upvotes: 1

Stuart
Stuart

Reputation: 6795

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>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

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>

Upvotes: 1

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

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>

Upvotes: 1

Nisarg Shah
Nisarg Shah

Reputation: 14541

You don't really need innerHTML for this one.1 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

Upvotes: 1

Related Questions