append 冲突的问题

for(var i=0;i<jsonvar.data.length;i++){
var chtml = '<li><p class="product_picture"><img src="'+jsonvar.data[i].src+'"></p>'
+'<p class="product_np"><a>'+jsonvar.data[i].name+'</a><a>￥'+jsonvar.data[i].price+'</a></p>'
+'<p class="product_ie">'+jsonvar.data[i].details+'</p><li>'

 var BoxLeftNode = document.querySelector('.BoxLeft')  
  var BoxRightNode = document.querySelector('.BoxRight')    

var node=document.createElement("li");//首先创建一个节点，  
 var textnode=document.createTextNode(chtml); //然后创建一个文本节点  
node.appendChild(textnode); //然后将文本节点添加到LI节点上  
if(BoxLeftNode.offsetHeight < BoxRightNode.clientHeight){    
      BoxLeftNode.appendChild(node);  
}else{   
    BoxRightNode.appendChild(node;//最后将节点添加到列表中       
}    

}

错误提示：
输出结果始终带两个引号。页面不能正常显示
用JQ写可正常运行可是和MUI冲突，MUI功能不能使用

检查后发现appendChild或append和MUI冲突。
看了滑动自动加载后，使用MUI方式可以正常的运行

问题：
如何和JQ不冲突正常使用？毕竟JQ使用还是方便一些