SOURCE

window.onload = function() {
    function $$(id) {
        return document.querySelector(`#${id}`);
    }

    // 定义单链表结点
    function LinkNode(data, next){
        this.data = data; // 数据域
        this.next = next; // 指针域
    }

    // 单链表初始化
    function createLink() {
        const list = new LinkNode(0, null);
        return list;
    }

    let list = createLink(),
        insertBtn = $$('insert'),
        getBtn = $$('get'),
        delBtn = $$('del'),
        currentBtn = $$('current'),
        result = $$('result');

    /**
    * 单链表插入数据
    * @param {array} list
    * @param {number} index
    * @param {object} data
    */
    function insertItem(list, index, data) {
        let obj = list;
        let k = 1;
        while(obj && index < k) {
            ++k;
            obj = obj.next;
        }
        if(!obj || k > index) {
            alert('插入位置不正确');
            return;
        }
        const sNode = new LinkNode(data, obj.next);
        obj.next = sNode;
        list.data += 1;
        result.innerHTML = `${result.innerHTML}<br />从索引${index}处插入一个元素<br />${JSON.stringify(list)}`
    }
    /**
    * 获取数据
    * @param {array} list
    * @param {number} index
    */
    function getItem(list, index) {
        let j = 1;
        let obj = list.next;
        while (obj && j < index) {
            ++j;
            obj = obj.next;
        }
        if(!obj || j > index) {
            alert('元素不存在');
            return;
        }
        result.innerHTML = `${result.innerHTML}<br />获取索引为 ${index} 的元素：<br />${JSON.stringify(obj)}`;
    }
    /**
    * 删除数据
    * @param {array} list
    * @param {number} index
    */
    function delItem(list, index) {
        let j = 1;
        let obj = list;
        while(obj.next && j < index) {
            ++j;
            obj = obj.next;
        }
        if(!(obj.next) || j > index) {
            alert('非法的删除位置');
            return;
        }
        let item = obj.next;
        obj.next = item.next;
        list.data -= 1;
        item = null;
        result.innerHTML = `${result.innerHTML}<br />删除索引为 ${index} 的元素：<br />${JSON.stringify(list)}`;
    }

    // 点击插入
    insertBtn.addEventListener('click', () => {
        const name = $$('name').value;
        const age = $$('age').value;
        const index = parseInt($$('index').value, 10) || 0;
        if(!name || !age) {
            alert('请补全输入框');
            return;
        }
        insertItem(list, index, {name, age});
    })
    // 点击获取
    getBtn.addEventListener('click', () => {
        const index = parseInt($$('index').value, 10);
        if(index === '') {
            alert('请输入索引');
            return;
        }
        getItem(list, parseInt(index, 10));
    })
    // 点击删除
    delBtn.addEventListener('click', () => {
        const index = parseInt($$('index').value, 10);
        if(index === '') {
            alert('请输入索引');
            return;
        }
        delItem(list, parseInt(index, 10));
    })
    // 查看当前
    currentBtn.addEventListener('click', () => {
        result.innerHTML = `${result.innerHTML}<br />当前 list 为：<br />${JSON.stringify(list)}`;
    })

}

<div>
    <h1>线性表的链式存储结构操作实例：</h1>
    <label for="name">姓名：<input type="text" id="name" placeholder="请输入姓名" /></label>
    <label for="age">年龄：<input type="number" id="age" placeholder="请输入年龄" /></label>
    <label for="index">索引：<input type="number" id="index" placeholder="索引(从0开始)" /></label>

    <input type="button" value="插入" id="insert">
    <input type="button" value="获取" id="get">
    <input type="button" value="删除" id="del">
    <input type="button" value="查看当前list" id="current">
</div>
<div>
    <h1>展示：</h1>
    <div id="result"></div>
</div>