手把手教你用js插入HTML元素

<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循环外面，否则每次循环，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">规格：'+product.product_standard+'</p>'
                            + '<p class="sel_detlmlip">产品类型：'+product.product_type+'</p>'
                            + '<p class="sel_detlmlip">厂家：'+product.product_producer+'</p>'
                            + '</li>'
                            + '</ul>'
                            + '<div>'
            }
            $('#theSame').html(html_same);
        }).fail(function(res){

        });
    });
    </script>