<ol>
<li>目錄 1</li>
<li>目錄 2</li>
<li>目錄 3</li>

</ol>
<button id="btn1">添加目錄</button>

<script type="text/javascript">
	let btn1=document.getElementById('btn1');
	console.log(btn1);
	let ol =document.getElementsByTagName('ol')[0];
	let li=document.getElementsByTagName('li');
	console.log(li);
	btn1.onclick=function(){
		ol.innerHTML+=`<li>追加目錄4</li>`
	}
</script>

    <!-- 同類商品推薦 -->
    <script type="text/javascript">
    $(function(){
        var my_role = $('#my_role').val();//一定要記得寫#啊，#代表id,.代表class..
        var data = {'role': my_role};
        $.post(contextPath+'/SameProductController',data,'json').done(function(datas){
            datas = JSON.parse(datas);
            var html_same ='';  //一定要寫在for循環(huán)外面，否則每次循環(huán)，html_same又被清空了..
            for(var i=0;i<datas.length;i++){
                var product = datas[i];
                var pic = 'img/'+product.product_img;
                html_same +='<div>'
                            + '<ul>'
                            + '<li class="sel_detlmli">'
                            + '<p class="sel_detlmlimg"><a href="#" rel="external nofollow"  rel="external nofollow" >'
                            + '<img src='+pic+' width="160" height="160" /></a></p>'
                            + '<p class="sel_detlmlip"><a href="#" rel="external nofollow"  rel="external nofollow" >名稱：'+product.product_name+'</a></p>'
                            + '<p class="sel_detlmlip">規(guī)格：'+product.product_standard+'</p>'
                            + '<p class="sel_detlmlip">產(chǎn)品類型：'+product.product_type+'</p>'
                            + '<p class="sel_detlmlip">廠家：'+product.product_producer+'</p>'
                            + '</li>'
                            + '</ul>'
                            + '<div>'
            }
            $('#theSame').html(html_same);
        }).fail(function(res){

        });
    });
    </script>