JavaScript动态创建DOM(七)
动态创建DOM
document.write只能在页面加载过程中才能动态创建。
可以调用document的createElement方法来创建具有指定标签的DOM对象,然后通过调用某个元素的appendChild();方法将新创建元素添加到相应的元素下。//父元素对象.removeChild(子元素对象);删除元素。
window.onload = function() {
var div = document.getElementById("d1");
//返回dom对象 在内存中创建
var btn = document.createElement("input");
btn.type = "button";
btn.id = "btn1";
btn.value = "我是动态创建的";
btn.onclick = function() {
alert("i'm a super button");
var txt = document.getElementById("t");
div.removeChild(txt);
}
div.appendChild(btn);
}
asdfasdf
aasdf
注:通过js动态创建的元素,直接 右键→查看源码是看不到的,需要通过“开发人员工具”才能看到。动态创建的控件,如果没有添加到文档中,则不能使用get...byid获取
innerText innerHTML value
value 获取表单元素的值
几乎所有DOM元素都有innerText、innerHTML属性(注意大小写),分别是元素标签内内容的文本表示形式和HTML源代码,这两个属性是可读可写的。//FF不支持innerText,在FF下用textContent属性。也可以用innerHTML设置普通文本。
示例: innerText与innerHTML区别。
function showInfo() {
var aObj = document.getElementById('a1');
alert(aObj.innerHTML);
alert(aObj.innerText);
}
用innerHTML也可以替代createElement,属于简单、粗放型、后果自负的创建。示例:
function createlink() {
var divMain = document.getElementById("divMain");
divMain.innerHTML = "如鹏网";
}
案例:点击按钮动态增加网站列表,分两列,第一列为网站的名字,第二列为带网站超链接的网站名。增加三行常见网站。浏览器兼容性问题,见备注。动态产生的元素,查看源代码是看不到的。通过DebugBar→Dom→文档→HTML可以看到。
window.onload = function() {
var json = [{ "name": "cnblogs", "site": "http://www.cnblogs.com" },
{ "name": "cnbeta", "site": "http://www.cnbeta.com" },
{ "name": "qiushibaike", "site": "http://www.qiushibaike.com" }
];
var div = document.getElementById("d1");
var table = document.createElement("table");
table.border = "1";
table.width = "400px";
div.appendChild(table);
for (var i = 0; i < json.length; i++) {
var site = json[i];
var row = document.createElement("tr"); //创建行
table.appendChild(row); //添加到table中
var td = document.createElement("td"); //创建td
td.innerHTML = "" + site.name + "";
row.appendChild(td);
td = document.createElement("td");
td.innerText = site.site;
row.appendChild(td);
}
}
练习:动态生成n个文本框
function f1() {
var num = document.getElementById("txt").value;
var div = document.getElementById("d1");
div.innerHTML = "";
for (var i = 1; i <= parseInt(num); i++) {
var t = document.createElement("input");
t.type = "text";
t.value = i;
t.id = "t" + i;
div.appendChild(t);
if (i % 3 == 0) {
var bt = document.createElement("br");
div.appendChild(bt);
}
}
}
练习:无刷新评论。
function f1() {
var name = document.getElementById("txtName").value;
var content = document.getElementById("txtContent").value;
var row = document.createElement("tr");
document.getElementById("tb").appendChild(row);
var td = document.createElement("td");
td.innerText = name;
row.appendChild(td);
td = document.createElement("td");
td.innerText = content;
row.appendChild(td);
}
猫猫: | 沙发耶! |
昵称:
浏览器兼容性问题
和IE8不一样,用insertRow、insertCell来代替或者为表格添加tbody,然后向tbody中添加tr。FF不支持innerText。
所以动态加载网站列表的程序修改为:
var tr = tableLinks.insertRow(-1);//FF必须加-1这个参数,表追加。如果不是负数,则表示在某个索引之前插入。
var td1 = tr.insertCell(-1);
td1.innerText = key;
var td2 = tr.insertCell(-1);
td2.innerHTML = "" + value + "";
或者:(不建议)
例:动态创建表格
window.onload = function () {
var json = [{ "name": "cnblogs", "site": "http://www.cnblogs.com" },
{ "name": "cnbeta", "site": "http://www.cnbeta.com" },
{ "name": "qiushibaike", "site": "http://www.qiushibaike.com" }];
var tb = document.createElement("table");
document.getElementById("d1").appendChild(tb);
tb.border = "1";
for (var i = 0; i < json.length; i++) {
var site = json[i];
var row = tb.insertRow(-1);
var td = row.insertCell(-1);
td.innerHTML = site.name;
td = row.insertCell(-1);
td.innerHTML = site.site;
}
}
innerHTML还是操作Dom节点
操作页面的元素的时候是用innerHTML的方式还是createElement()、appendChild()与removeChild()的方式?
1.对于大量进行节点操作时,使用innerHTML的方式性能要好于频繁的Dom操作。
先将页面的HTML代码写好,然后调用一次innerHTML,而不要反复调用innerHTML.
2.对于使用innerHTML=‘’的方式来删除节点,在某些情况下会存在内存问题。比如:div下面有很多其他元素,每个元素都绑定有事件处理程序。此时,innerHTML只是把当前元素从节点树上移除了,但是那些事件处理程序依然占用内存。
代码是否需要放置到onload中
如果js代码需要操作页面上的元素,则将该代码放到onload里面。因为当页面加载完毕之后页面上才会有相关的元素
如果js代码中没有操作页面元素的语句,则可以将该代码直接写在