Question

在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，但是我认为这里有一些小细节。

非常感谢您的帮助。

Answer 1

您实际上不需要innerHTML。¹有两个主要任务，（1）设置li元素的文本和（2）设置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 = "";
});

<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通常不受欢迎，因为它容易受到XSS攻击：XSS prevention and .innerHTML

Answer 2

您可以尝试下面的代码，在这些代码中需要将li附加到ul并首先将输入值分配给li。创建i，分配所需的类，然后将其附加到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>

Answer 3

当您尝试通过使用[object HTMLElement]将Element对象强制附加到字符串时，看到innerHTML。相反，您需要使用input设置innerText文本值，然后为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>

Answer 4

您需要使用appendChild附加i：

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>

Answer 5

问题是您要将html对象附加到<ul>中。尝试这样的事情

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

Answer 6

由于您已经用JQuery标记了您的问题...或者，嗯，至少我以为我早就看到了它。

您也可以这样：

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

或者如果您想使用createElement而不是添加原始文本：

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

单击Java脚本后如何将带有<i>元素的<li>元素添加到<ul>

6 个答案: