var data = [{
    "Id": 1,
    "ParentId": 0,
    "Name": "实验学校",
    "Content": "实验学校",
    "IsOpen": false,
    "Chlidren": [{
        "Id": 4,
        "ParentId": 1,
        "Name": "高中部",
        "Content": "高中部",
        "IsOpen": false,
        "Chlidren": [{
            "Id": 7,
            "ParentId": 4,
            "Name": "高一",
            "Content": "高一",
            "IsOpen": true,
            "Chlidren": []
        }, {
            "Id": 8,
            "ParentId": 4,
            "Name": "高二",
            "Content": "高二",
            "IsOpen": true,
            "Chlidren": []
        }, {
            "Id": 9,
            "ParentId": 4,
            "Name": "高三",
            "Content": "高三",
            "IsOpen": true,
            "Chlidren": []
        }, {
            "Id": 10,
            "ParentId": 4,
            "Name": "高四",
            "Content": "高四",
            "IsOpen": true,
            "Chlidren": []
        }, {
            "Id": 11,
            "ParentId": 4,
            "Name": "高五",
            "Content": "高五",
            "IsOpen": true,
            "Chlidren": []
        }]
    }, {
        "Id": 6,
        "ParentId": 1,
        "Name": "初中部",
        "Content": "初中部",
        "IsOpen": false,
        "Chlidren": [{
            "Id": 12,
            "ParentId": 6,
            "Name": "初一",
            "Content": "初一",
            "IsOpen": true,
            "Chlidren": []
        }, {
            "Id": 13,
            "ParentId": 6,
            "Name": "初二",
            "Content": "初二",
            "IsOpen": true,
            "Chlidren": []
        }, {
            "Id": 14,
            "ParentId": 6,
            "Name": "初三",
            "Content": "初三",
            "IsOpen": true,
            "Chlidren": []
        }, {
            "Id": 15,
            "ParentId": 6,
            "Name": "初四",
            "Content": "初四",
            "IsOpen": true,
            "Chlidren": []
        }, {
            "Id": 16,
            "ParentId": 6,
            "Name": "初五",
            "Content": "初五",
            "IsOpen": true,
            "Chlidren": []
        }]
    }]
}, {
    "Id": 2,
    "ParentId": 0,
    "Name": "景天学校",
    "Content": "景天学校",
    "IsOpen": false,
    "Chlidren": [{
        "Id": 17,
        "ParentId": 2,
        "Name": "南山学校",
        "Content": "南山学校",
        "IsOpen": true,
        "Chlidren": []
    }]
}, {
    "Id": 3,
    "ParentId": 0,
    "Name": "福田学校",
    "Content": "福田学校",
    "IsOpen": true,
    "Chlidren": []
}]


function create(arr) {
    var body = document.getElementsByTagName('body')[0]
    var root = document.createElement('ul');
    root.classList = 'c-ul';
    for(var i=0; i<arr.length; i++) {
        var node = createNode(arr[i])
        root.appendChild(node);
    }
    body.appendChild(root)
    console.log(root.outerHTML);
}

function createNode(node) {
    var li = document.createElement('li');
    var span = document.createElement('span');
    var i = document.createElement('i');
    var input = document.createElement('input');
    var a = document.createElement('a');
    span.setAttribute('data-text', node.Name)
    var isChild = node.IsOpen ? true: false;
    span.setAttribute('data-chlid', false)
    span.setAttribute('title', node.Name)
    i.classList = 'fa fa-angle-down'
    i.style = 'padding-left: 10px'
    input.classList="pcheck"
    input.setAttribute('type', 'checkbox')
    a.setAttribute('href',"javascript:void(0)")
    a.textContent = node.Content
    span.appendChild(i)
    span.appendChild(input)
    span.appendChild(a)
    var ul = document.createElement('ul');
    ul.classList = 'append-ul'
    li.appendChild(span)
    li.appendChild(ul)

    if(!node.IsOpen) {
        for(var i = 0; i<node.Chlidren.length;i++) {
            var hel = createNode(node.Chlidren[i])
            ul.appendChild(hel)
        }
    }
    return li
}

create(data)