java - 在java脚本中单击后如何将带有<i>元素的<li>元素添加到<ul>答案

【问题标题】：How to add <li> element with <i> element to <ul> after click in java scriptjava - 在java脚本中单击后如何将带有<i>元素的<li>元素添加到<ul>
【发布时间】：2018-09-06 10:44:29
【问题描述】：

我在点击 java 脚本后添加元素（关闭按钮）有一个小问题。

代码如下：

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>

它给了我“HTML 元素对象”。我现在正在使用简单的任务学习 Js，但这里我认为有一些小细节。

提前感谢您的帮助。

【问题讨论】：

你可以使用 jQuery 吗？？

标签： javascript html function onclick

【解决方案1】：

当您尝试通过使用 innerHTML 来附加 Element 对象时，您会看到 [object HTMLElement]，这会将其强制为字符串。您需要使用innerText 设置input 文本值，然后使用appendChild() 设置i 元素，因为您已经在其他地方。

另请注意，您需要将类添加到i，这可以通过使用classList.add() 来完成。试试这个：

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>

【讨论】：

我也走得更远了……想在点击 元素时删除
元素。我有这样的代码，但它不起作用。请注意，我仍在学习 JS :-) 提前感谢您的帮助。 var remove = document.querySelectorAll(".fas"); remove.addEventListener("click", function () { for(var i = 0; i

我建议开始一个新问题，因为这是一个完全不同的话题。

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

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

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&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>

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&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>

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

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