如何添加新列表

Question

打扰一下，我是 jquery 的新人，我试图实现我在前置课程中学到的东西，我制作了一个简单的表格，想在按下提交后前置新列表，这很有效，但是新创建的列表与主列表不同，因为 h3、p 和 span 没有相同的 div 父级，我如何在 prepend 方法中做到这一点或如何解决这个问题反正？ , 我尝试了克隆方法，但不是很好的选择

$(function() {
  var counter = 0;
  $('#submit').on('click', function() {
    counter++;
    var myTitle = $('#title').val(),
      myTime = $('#time').val(),
      myDescription = $('#description').val();

    if (counter > 0) {
      $('.list').prepend('<li><h3>' + myTitle + '</h3></br><p>' + myDescription + '</p><span>' + myTime + '</span></li>');
    }

  });
});

input{
display: block
}
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.list li {
  border-left: 2px solid #ccc;
  background: #f6f7f9;
}

.list li h3 {
  margin: 0;
  font-size: 14px;
  font-weight: inherit;
  color: red;
}

.list li p {
  font-size: 10px;
  font-weight: inherit
}

.list li span {
color: green;
}

.item {
  display: flex;
  padding: 10px;
}
.l-list {
  flex-basis: 50%;
  text-align: left;
}
.r-list {
  flex-basis: 50%;
  text-align: right
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="list">
  <li>
    <div class='item'>
      <div class="l-list">
        <h3>some title</h3>
        <p>some description here</p>
      </div>
      <div class="r-list">
        <span>02:45 PM</span>
      </div>
    </div>
  </li>
</ul>


<label>Title</label>
<input id='title' type="text">

<label>description</label>
<input id='description' type="text">

<input id='time' type="time">

<button id='submit' role="button">submit
                    </button>

Answer 1

因为你忘了加上这些div:

<div class='item'>
<div class="l-list">
<div class="r-list">

你应该append/prepend这个：

"<li><div class='item'><div class='l-list'><h3>" + myTitle + "</h3></br><p>" + myDescription + "</p></div> <div class='r-list'><span>" + myTime + "</span> </div>    </div></li>"

这是一个演示代码片段：

$(function() {
  var counter = 0;
  $('#submit').on('click', function() {
    counter++;
    var myTitle = $('#title').val(),
      myTime = $('#time').val(),
      myDescription = $('#description').val();
   
    if (counter > 0) {
      $('.list').prepend("<li><div class='item'><div class='l-list'><h3>" + myTitle + "</h3></br><p>" + myDescription + "</p></div> <div class='r-list'><span>" + myTime + "</span> </div>    </div></li>");
    }

  });
});

input{
display: block
}
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.list li {
  border-left: 2px solid #ccc;
  background: #f6f7f9;
}

.list li h3 {
  margin: 0;
  font-size: 14px;
  font-weight: inherit;
  color: red;
}

.list li p {
  font-size: 10px;
  font-weight: inherit
}

.list li span {
color: green;
}

.item {
  display: flex;
  padding: 10px;
}
.l-list {
  flex-basis: 50%;
  text-align: left;
}
.r-list {
  flex-basis: 50%;
  text-align: right
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="list">
  <li>
    <div class='item'>
      <div class="l-list">
        <h3>some title</h3>
        <p>some description here</p>
      </div>
      <div class="r-list">
        <span>02:45 PM</span>
      </div>
    </div>
  </li>
</ul>


<label>Title</label>
<input id='title' type="text">

<label>description</label>
<input id='description' type="text">

<input id='time' type="time">

<button id='submit' role="button">submit
                    </button>

如何添加新列表

How to Prepend New Lists

html

jquery

append

prepend