"utf-8">
        
    
    
        
    "box">

 

1、增删改查

1.1创建节点

            var ul = document.getElementById('box');
            // 创建节点
            var li1 = document.createElement('li');
            var li2 = document.createElement('li');
　　　　　　　　
ul.appendChild(li1);
ul.appendChild(li2);

1.2设置标签文本内容

            var ul = document.getElementById('box');
            // 创建节点
            var li1 = document.createElement('li');
            var li2 = document.createElement('li');
             // innerText 只设置文本
            li1.innerText  = '123';

            ul.appendChild(li1);
            ul.appendChild(li2);

元素对象.inner文本=‘内容’

            var ul = document.getElementById('box');
            // 创建节点
            var li1 = document.createElement('li');
            var li2 = document.createElement('li');
            // // innerText 只设置文本
            li1.innerText  = '123';
            li1.innerText  = 'mcw';

            ul.appendChild(li1);
            ul.appendChild(li2);

使用两次，会被覆盖掉

 

 1.3、给添加的标签设置属性和文本并添加子标签

            var ul = document.getElementById('box');
            // 创建节点
            var li1 = document.createElement('li');
            var li2 = document.createElement('li');
            li1.innerHTML = '123';
            li1.setAttribute('class','active');
            console.log(li1.children);
            li1.children[0].style.color = 'red';
            li1.children[0].style.fontSize = '20px';
            ul.appendChild(li1);
            ul.appendChild(li2);

1）创建dom对象    document.getElementById('box');

2)创建标签对象；   document.createElement('li')

3)标签对象插入文本内容：li1.innerText=‘内容’；

4）标签对象插入html,插入子标签：  li1.innerHTML = '123';

5）根据索引获取子标签位置并设置样式：  li1.children[0].style.color = 'red';

6）将创建的标签追加进html文档对象：   ul.appendChild(li1);

li1.children只有一个元素，可以索引取值。

1.4、在某个标签之前插入标签   ul.insertBefore(li2,li1);

            var ul = document.getElementById('box');
            // 创建节点
            var li1 = document.createElement('li');
            var li2 = document.createElement('li');
            // // innerText 只设置文本
            // li1.innerText  = '123';
            li1.innerHTML = '123';
            li1.setAttribute('class','active');
            console.log(li1.children);
            li1.children[0].style.color = 'red';
            li1.children[0].style.fontSize = '20px';
            ul.appendChild(li1);            li2.innerHTML = '第一个';
            ul.insertBefore(li2,li1);//如果li1不存在或没有追加进去，那么此条不执行

1.5、删除标签   文档对象. r移除孩子（）             ul.removeChild(li2);

            var ul = document.getElementById('box');
            // 创建节点
            var li1 = document.createElement('li');
            var li2 = document.createElement('li');
            li1.innerHTML = '123';
            li1.setAttribute('class','active');
            console.log(li1.children);
            li1.children[0].style.color = 'red';
            li1.children[0].style.fontSize = '20px';
            ul.appendChild(li1);
            // ul.appendChild(li2);
            //
            li2.innerHTML = '第一个';
            ul.insertBefore(li2,li1);
            //
            ul.removeChild(li2);

 2、对属性，值，节点的操作案例

 

for循环批量生成标签：



    
        "utf-8">
        
        
    
    
        
    "box">

将模拟从数据库拿来的数据放在生成的标签里，并给标签写好css样式：



    
        "utf-8">
        
        
    
    
        
    "box">
View Code

这样就生成了这个列表，数据库有多少个显示多少个。