Javascript-форум - Как добавить эллемент к списку при нажатии на кнопку

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Как добавить эллемент к списку при нажатии на кнопку (https://javascript.ru/forum/jquery/80414-kak-dobavit-ehllement-k-spisku-pri-nazhatii-na-knopku.html)

Как добавить эллемент к списку при нажатии на кнопку

Не могу понять как добавить "Задания" к списку при нажатии на кнопку добавить

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>JavaScript</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<h1>Список дел</h1>
<form class="" action="index.html" method="post">
  <input type="text" name="list-items" placeholder="задание">
</form>
  <br>
  <button id="add"  >Добавить</button>
  <button id="show">Отобразить</button>
<div id="block">
Эллемент был добавлен
</div>
<ol></ol>

$("#block").toggle();
$('#add').click(function() {
      			$('#block').toggle();
            $('#block').hide(3000);

      		});
$('#show').click(function() {
  var toAdd = $('input[name=list-items]').val();
  if(toAdd == "")
  return false;
  $('ol').append('<li>' + toAdd + '</li>');
			$('input[name=list-items]').val("");
		});

И в чем смысл кнопки Отобразить, если охота добавлять по кнопке Добавить, а добавляется кнопкой Отобразить?

$("#block").toggle(); можно удалить, сделав "block" изначально скрытым, и $('#block').show().hide(time);

Такое задание.

Я не понимаю таких заданий. Если нужно добавлять кнопкой Добавить, значит код прописанный для кнопки Отобразить должен быть перемещен в обработчик кнопки Добавить, а обработчик кнопки Отобразить что-то показывать, что не знаю.

$('#block').hide(3000); - как такое для пользователя, неужто удобный эффект? Наверное разумнее показать, отобразить t секунд, затем быстро скрыть? Все это можно сделать одной кнопкой, причем скрыть/показать сообщение посредством dispalay none, это плохо, почему попробуйте догадаться сами.

<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    var toAdd = $('input[name=list-items]').focus(function() {
        this.value = ''
    }), block = $('#block').css({opacity: 0}), ol = $('ol');

    $('#add').click(function() {
        if(!$.trim(toAdd.val())) return;
        block.css({opacity: 1}).delay(1000).animate({opacity: 0}, 300);
        $('<li/>', {text: toAdd.val()}).appendTo(ol);
    });    
});
</script>
</head>
<body>
<input type="text" name="list-items" placeholder="задание">
<button id="add">Добавить</button>

<div id="block">
Эллемент был добавлен
</div>

<ol></ol>
</body>
</html>