js JQ动态添加div标签

Posted 2020-12-18 mir-bink

function renderList(data){
    var str = ‘‘;
    for(var i = 0; i < data.length; i++){
        // 动态添加li
        str += ‘<li onclick="getFile(‘‘+ data[i].file_id + ‘‘,‘‘ + data[i].file_name+ ‘‘,‘‘ + data[i].file_type+‘‘,this)" class="filelist">‘ + data[i].file_name + ‘<a href="#" class="easyui-linkbutton" onclick="downLoad(‘‘+ data[i].file_id + ‘‘)">下载</a>‘ + ‘</li>‘; 
    }
      
    $(".file_list").append(str);
}

使用‘  ’ 字符串模板包裹第v标签，比如‘<li></li>’，其中如果有onclick，需要将其中的参数使用 ‘’ 包裹起来，‘ ’需要进行转义，转义后的‘        ‘    ,中间再使用 ’  ‘包裹，参数使用+ 连接，最后 

onclick="downLoad(‘‘+ data[i].file_id + ‘‘)" 。效果：

 

 

 

 

还有其中有style的

var str = ‘<div class="queries-box" style="float:left"><input id="agency_id" class="easyui-combotree combotree-f combo-f textbox-f" data-options="" style="width: 56%; height: 24px; display: none;" textboxname="agency_id" comboname="agency_id"></div>‘
            var olr = $(‘#topnav .fr‘);
            olr.append(str);