[前端] js实现动态元素创建

因为是先学习的jquery，以至于对纯js的动态生成节点元素还不熟悉，所以在此写下自己的测试，希望对大家有所帮助

方法：

createElement 创建元素

appendChild(); 追加子元素

cssText 样式文本

createAttribute() 创建属性

createTextNode() 创建文本节点

createAttribute('type').nodeValue 设置属性值

createElement('input').setAttributeNode() 向元素中添加属性

Math.floor() 舍位取整

Math.random() 0~的随机数

 

<script type="text/javascript">

    /* 创建列表 */
    var arr = [1, 2, 3, 4, 5, 6, 7];
    var ul = document.createElement('ul');
    for(var i= 0; i<arr.length; i++) {
        var li = document.createElement('li');
        var text = document.createTextNode(arr[i]);
        li.appendChild(text);
        ul.appendChild(li);
        li.style.cssText = "list-style-type: none;float:left; width: 24px; height: 24px; margin-right: 5px; border: 1px solid #ccc; text-align: center; line-height: 24px;";
    }
    document.body.appendChild(ul);

    /* 创建按钮 */
    var button = document.createElement("input");
    var buttonType = document.createAttribute('type');  // 创建属性
    var buttonValue = document.createAttribute('value');
    buttonType.nodeValue = 'button';  // 设置属性值
    buttonValue.nodeValue = '按钮';
    button.setAttributeNode(buttonType);  // 设置属性
    button.setAttributeNode(buttonValue);
    button.style.cssText = "height: 26px; padding: 0 10px;";
    document.body.appendChild(button);

    /* 设置按钮事件 */
    button.addEventListener('click', function() {
        var div = document.createElement('div');
        div.style.clear = 'both';
        div.style.height = 32+'px';
        div.style.marginTop = 5+'px';
        var ul = document.createElement('ul');
        for(var i= 0; i<arr.length; i++) {
            var li = document.createElement('li');
            var text = document.createTextNode(arr[Math.floor(Math.random() * arr.length)]);
            li.appendChild(text);
            ul.appendChild(li);
            li.style.cssText = "list-style-type: none;float:left; width: 24px; height: 24px; margin-right: 5px; border: 1px solid #ccc; text-align: center; line-height: 24px;";
        }
        div.appendChild(ul);
        document.body.appendChild(div);
    }, false);
    
</script>

 

欢迎关注技术开发分享录：http://fenxianglu.cn/