如何預先列出新列表

Question

對不起，我是jquery中的新成員，我試圖實現我在前置課中學到的東西，我製作了一個簡單的表單，並且想要在按Submit之後添加新列表，並且這很有效，新創建的列表與主要列表不一樣，因爲h3，p和span不具有相同的div父級，我如何在prepend方法中執行該操作，或者如何以任何方式解決此問題？ ，我試圖克隆方法，但因爲你忘了添加這些div這不是很好的選擇

$(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 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>