如何预置新列表

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

因为您忘记添加这些function imgU() { if (event.target.type == "select-one") { iSize = event.target.value; } else if (event.target.type == "text") { iText = event.target.value; } else if (event.target.id == "imc") { var nColor = event.target.value; iColor = nColor.replace("#", ""); } else if (event.target.id == "tmc") { var mColor = event.target.value; tColor = mColor.replace("#", ""); } var imsrc = "http://via.placeholder.com/" + iSize + "/" + iColor + "/" + tColor + "?text=" + iText; }：

div

您应该<div class='item'> <div class="l-list"> <div class="r-list"> / append这个：

prepend

以下是演示代码段：

＆＃13;

＆＃13;

"<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>"

＆＃13;

$(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>");
    }

  });
});

＆＃13;

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
}

＆＃13;

＆＃13;

＆＃13;