个人中心
gpt4 book ai didi

javascript - 如何在 Javascript 中将列表项添加到无序列表

转载 作者：行者123 更新时间：2023-11-27 23:06:53 24 4
gpt4 key购买 nike

我正在开发一个包含表单和列表的网络应用程序(待办事项列表)。每次用户提交表单时，提交的元素将作为 li 添加到列表中。我知道如何向 ul 添加列表项。我的问题是我希望能够将新添加的 li 格式化为前一个。我正在使用 bootstrap 做这个元素，它有自己的预定义类。所以我想在这些类(class)中添加新的 li。这是在线网络应用程序 http://pctechtips.org/apps/todo/这是单个 li 的样子，所以当添加新的 li 时，我想知道如何保持相同的格式

<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<i class="fa fa-trash-o" aria-hidden="true"></i>
</li>
//javascript file


//variables
//todoList array to hold (title, description) for every todo tiem
var todoList = [{
    title: "Buy Groceries",
    desc: "go to win-dixie and buy bread, ham, and cheese"
  },
  {
    title: "Pay Car Insurance",
    desc: "call State Farm and pay year insureance"
  },
  {
    title: "Do this",
    desc: "this is another todo item description"
  }
]

/*
 * Script main body
 */
$(document).ready(function() {
  //hide form when doc loads first time
  $("#submit-form").hide();

  //listener for show hide form functionality
  $("#add-todo").click(function() {
    toggleForm();
    return false; //return false to prevent page reload
  });

  //listener for add new item form (submit button)
  $(".btn").click(function() {
    console.log("submit item");
    addToList();
  });
});

//functionality for show / hide form
function toggleForm() {
  if ($("#submit-form").is(":hidden")) {
    console.log("form exapnded");
    $("#submit-form").show("slow");
    $("#form-icon").removeClass("fa-plus-square-o");
    $("#form-icon").addClass("fa-minus-square-o");
  } else {
    console.log("form hidden");
    $("#submit-form").hide("slow");
    $("#form-icon").removeClass("fa-minus-square-o");
    $("#form-icon").addClass("fa-plus-square-o");
  }
}

//add new item to todo list items
function addToList() {
  //getting data from input fields
  var todoTitle = $("#todo-title").val();
  var todoDesc = $("#todo-desc").val();
  //checking user input
  if (todoTitle == null || todoDesc == null) {
    alert("fill in all fields!");
  } else {
    console.log(todoTitle + "\n" + todoDesc);
    //adding new li to ul   
    var ul = document.getElementById("list");
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(todoTitle));
    ul.appendChild(li);
    // li.innerHtml = "<li class="list-group-item d-flex justify-content-between align-items-center">"+todoTitle+"<i class="fa fa-trash-o" aria-hidden="true"></i></li>"

  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<!-- index.html -->

<!DOCTYPE html>
<html>

<head>
  <title>TodoList App</title>
  <!-- bootstrap, fontawsome cdn -->
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <!-- local stylesheet -->
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <!-- jquery cdn -->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <!-- local javascript -->
  <script type="text/javascript" src="js/todo.js"></script>

</head>

<body>
  <!-- navbar -->
  <nav class="navbar navbar-expand-lg navbar-drak bg-dark mb-4">
    <a class="navbar-brand" href="#"><i class="fa fa-thumb-tack" aria-hidden="true"></i> Todo<strong>List</strong></a>
  </nav>
  <!-- /navbar -->
  <!-- todoList -->
  <div class="container">
    <div class="add-item text-white text-center col-sm-12 col-md-10 col-lg-8 mb-4">
      <a id="add-todo" class="new-todo text-white text-center" href=""><i id="form-icon" class="fa fa-plus-square-o" aria-hidden="true"></i> Enter new todo item</a>
      <div id="submit-form" class="form-hide text-center col-sm-12 col-md-12 col-lg-8">
        <form class="">
          <div class="form-group">
            <input type="text" class="form-control" id="todo-title" placeholder="Todo Title">
          </div>
          <div class="form-group">
            <input type="text" class="form-control" id="todo-desc" placeholder="Todo Description">
          </div>
          <button type="button" class="btn btn-primary btn-lg col-12">Submit Todo</button>
        </form>
      </div>
      <!-- horizontal line -->
      <hr>
      <!-- list items -->
      <h1 class="heading-4">Todo List Items</h1>
      <ul id="list" class="list-group mt-4 pb-4">
        <li class="list-group-item d-flex justify-content-between align-items-center">
          <i class="fa fa-plus-square-o" aria-hidden="true"></i> Pay Car Insurance
          <i class="fa fa-pencil" aria-hidden="true"></i>
          <i class="fa fa-trash-o" aria-hidden="true"></i>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
          Dapibus ac facilisis in
          <i class="fa fa-trash-o" aria-hidden="true"></i>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
          Morbi leo risus
          <i class="fa fa-trash-o" aria-hidden="true"></i>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>

最佳答案

您正在使用 Jquery。因此您可以使用它来添加类和追加子元素。

var ul = document.getElementById("list");
var li = document.createElement("li");

$(li).addClass("list-group-item d-flex justify-content-between align-items-center");
$(li).append(document.createTextNode(todoTitle));
$(li).append(($('<i class="fa fa-trash-o" aria-hidden="true"></i>')));

我唯一添加的是 addClass() 方法和 append() 方法，用于添加所需的类并附加垃圾桶图标。

检查这里的 fiddle :Fiddle

希望对您有所帮助!

关于javascript - 如何在 Javascript 中将列表项添加到无序列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48456091/

24 4 0
文章推荐： javascript - 如何用图像绘制等 Angular 平面？
文章推荐： jquery - 单击关闭按钮后，如何删除警告框的基于 FontAwesome 的背景？
文章推荐： html - 如何在孔宽上连续对齐 3 个图像( Logo )并使它们在较小的显示器上保持这种对齐方式
文章推荐： javascript - 从 ViewBag 加载文件？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com