jqueryまたはjavascriptでhtmlリストを作成するにはどうすればよいですか？

Question

私はHTMLでリストを作成したいと思っています。そして、ユーザはリストを選択して、選択したものを何かします。

たとえば、果物のリスト。アップルバナナ、ブドウ。

ユーザーがブドウを選択し、ブドウが選択されている場合、ブドウの数が尋ねられます。

私は私はJavascriptやjQueryの

でこれを行うことができますどのように知っていただきたいと思い

Answer 1

このコードブロックを使用してください。そのような単純な、

//generates the list 
 
var items = 'Apple, bannana, grapes'; 
 
var nHtml = ''; 
 
items = items.split(','); 
 
items.forEach(function(v){ 
 
    //trim() will remove the blank spaces 
 
    nHtml+='<li>'+ v.trim() +'</li>'; 
 
}); 
 
$('#itemList').append('<ul>'+ nHtml +'</ul>'); 
 

 
//detect click on the list item 
 
$('li').click(function(){ 
 
    var name = $(this).text(); 
 
    var question = 'How many '+name+' ?'; 
 
    $('#question').html('<span>'+ question +'</span><input type="text" id="answer" />') 
 
}); 
 

 
//get the number feed into the text box 
 
function getCount(){ 
 
    var answer = $('#answer').val(); 
 
    console.log(answer); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='itemList'></div> 
 
<div id='question'></div> 
 
<button onclick='getCount()'>Get Count</button>