Question

这是我的待办事项清单。我想在我的清单中添加新的注释。 li> p> i，i，输入：

var list = document.querySelector('.list');

document.querySelector('.add-btn').addEventListener('click', function(e){
  e.preventDefault();  
var input = document.querySelector('.add-input');
  if(input.value !== '') {
    var li = document.createElement('li');
        firstP = document.createElement('p');
        secondP = document.createElement('p');
        firstIc = document.createElement('i');
        secondIc = document.createElement('i');
        input1 = document.createElement('input');

        firstIc.className = 'fas fa-edit';
        secondIc.className = 'fas fa-trash-alt';
        input1.className = 'edit-note';
        input1.setAttribute('type', 'text');

        firstP.textContent = input.value;
        secondP.appendChild(firstIc);
        secondP.appendChild(secondIc);
        li.appendChild(firstP);
        li.appendChild(secondP);
        li.appendChild(input1);
        li.appendChild(li);
  }
});

这是HTML：

<div class='container'>
        <h1>Note manager</h1>

        <ul class="list">
            <li>
                <p>First note</p>
                <p><i class="fas fa-edit"></i><i class="fas fa-trash-alt"></i></p>
                <input type="text" name="" class="edit-note">
            </li>
            <li>
                <p>Second note</p>
                <p><i class="fas fa-edit"></i><i class="fas fa-trash-alt"></i></p>
                <input type="text" name="" class="edit-note">
            </li>
        </ul>
        <div class="add-notes">
          <input type="text" name="" class="add-input" placeholder="Add a note..">
          <button type="submit" class="add-btn"> Add</button>
        </div> 
    </div>

当我刷新页面时，我想保存添加的注释。我怎样才能做到这一点？我应该使用AJAX>吗？

Answer 1

看这行：

li.appendChild(li);

在这里您将元素添加为自身的子元素（当然是不可能的），看起来就像您想做的

list.appendChild(li);

相反。

编辑：

回答最新的问题：您应该将商品发布到服务器上并将其保存在服务器上，或者可以使用localStorage将商品保留在浏览器中（link）

刷新页面后如何保存数据

1 个答案: