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

来源：互联网发布：香港大学网络教育编辑：程序博客网时间：2024/05/17 01:04

因为是先学习的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>

谢谢关注！

0 0