Javascript-dom总结(动态创建标签、innerHTML和innerText)

1.动态创建控件

 //创建input
            var input = document.createElement("input");
            //设置属性   也可以设置非标准属性，来存一些数据
            input.type = "button";
            input.value = "我是动态生成的";
            //将生成的控件添加到dom对象中
            document.body.appendChild(input);

2.动态创建table

function t() {
            //数据  hashmap
            var sites = { "百度": "http://www.baidu.com", "谷歌": "http://www.google.com" };
            //创建table
            var table = document.createElement("table");
            //创建tbody
            var tbody = document.createElement("tbody");
            //将tbody加入table
            table.appendChild(tbody);
            //将table加入body
            document.body.appendChild(table);
            //遍历集合  每一项是个tr
            for (var key in sites) {
                var value = sites[key];
                //创建tr并加入到tbody中
                var tr = document.createElement("tr");
                tbody.appendChild(tr);

                //创建td,设置内容并添加到tr中
                var td1 = document.createElement("td");
                td1.innerText = key;
                tr.appendChild(td1);

                var td2 = document.createElement("td");
                td2.innerText = value;
                tr.appendChild(td2);
            }
        }

3. innerHTML、innerText

innerHTML会解析字符串中的html代码

innerText不解析出现的html代码，会以文本形式完全显示

var a = document.getElementById("a");
//设置innerHTML
a.innerHTML = "<font color='blue'>哎呀呀</font>";

控件a会显示蓝色的“哎呀呀”，但如果设置的innerText则会显示黑色的“<font color='blue'>哎呀呀</font>”