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