如何添加 元素与元素 点击javascript后点击

问题描述 投票：3回答：6

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

提前感谢您的帮助。

javascript html function onclick
6个回答
1
投票

当你试图通过使用[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>
innerHTML
1
投票

你真的不需要li这个.1有两个主要任务，（1）设置i元素的文本和（2）在// 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>
innerHTML

1 - XSS prevention and .innerHTML通常不受欢迎，因为它易受XSS攻击：li

1
投票

您可以尝试下面的代码，您需要将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>
i
1
投票

你需要使用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>
<ul>
1
投票

问题是你将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("<li>" + $('#new-task').val() + "<i></i></li>");
   });
});
1
投票

既然你用JQuery标记了你的问题......或者，呃，至少我以为我之前看过它。

你也可以这样做：

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

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

qazxswpoi
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.