stackoom
  简体   繁体   中英

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

 原文  2018-09-06 10:44:29  8   6    javascript/ html/ function/ onclick

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.

6 answers

solution1
 1  2018-09-06 10:48:48

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

solution2
 1  2018-09-06 10:49:19

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>

solution3
 1 ACCPTED  2018-09-06 10:50:10

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>

solution4
 1  2018-09-06 10:51:17

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>

solution5
 1  2018-09-06 11:04:37

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

solution6
 1  2018-09-06 15:14:11

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to switch id of ul after click on li element? How to add detached li element to ul list Append <li> element to <ul> and add click event for each? add ul to a li element in an existing ul How do I generate these jQuery links inside of a <ul> element after the first <li> child element? create and add “li” element after click how to show the dynamically added UL Li element highlighted for 3-5 seconds after click on button Click event on newly created UL LI element How to add <li> to <ul> with data element from localstorage add li element in ul using jquery
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM