。

荣誉2022年度博客之星Top4、2023年度超级个体得主、谷歌与亚马逊开发者大会特约speaker、全栈领域优质创作者。

白宝书系列

document.createElement()方法用于创建一个指定tagname的HTML元素

但是新创建出来的节点是“孤儿节点”它并没有被挂载到DOM树上我们无法看见它

必须继续使用appendChild()或insertBefore()方法将孤儿节点插入到DOM树上。

appendchild()就是追加一个子节点的意思。

任何已经在DOM树上的节点都可以调用appendChild()方法它可以将孤儿节点挂载到它的内部成为它的最后一个子节点。

insertBefore()就是在前方插入节点的意思。

任何已经在DOM树上的节点都可以调用insertBefore()方法它可以将孤儿节点挂载到它的内部成为它的“标杆子节点”之前的节点

示例代码

idboxp段落1/pp段落2/pp段落3/p/divscript//定义节点变量获取div标签var

oBox

document.getElementById(box);//定义节点变量获取p标签var

oPs

oBox.getElementsByTagName(p);//创建一个孤儿节点pvar

document.createElement(P);oP.innerHTML

oP1

document.createElement(p);oP1.innerHTML

插入标杆节点之前;

//修改孤儿节点的内容oBox.insertBefore(oP1,

oPs[1]);

题目分析使用for循环语句循环创建20次tr循环内嵌套一个for循环创建12次td

代码如下

idbox/divscript//请动态创建出一个20行12列的表格var

oBox

document.getElementById(box);//创建节点---tablevar

oTable

document.createElement(table);oBox.appendChild(oTable);

(var

document.createElement(tr);oTable.appendChild(oTr);//创建节点---tdfor(var

12;

document.createElement(td);oTr.appendChild(oTd);}}/script

题目分析和上面的题目一样创建表格然后在表格里面修改内容例如1*12…需要注意的是九九乘法表不是一个方方正正的表格而是每一行的列数都比前一行多一个所以循环嵌套的时候循环的次数要思考清楚

代码如下

idbox/divscript//请制作九九乘法表利用DOM节点操作var

oBox

document.getElementById(box);//创建节点---tablevar

oTable

document.createElement(table);oBox.appendChild(oTable);//创建节点---trfor

(var

document.createElement(tr);oTable.appendChild(oTr);//创建节点---tdfor

(var

document.createElement(td);oTd.innerHTML

i*j;

//填入内容oTr.appendChild(oTd);}}/script

/body✨

如果将已经挂载到DOM树上的节点成为appendChild()或者insertBefore()的参数这个节点将会被移动

语法新父节点.insertBefore(已经有父亲的节点标杆子节点);

示例代码

idbox2/divscript//将#box1中的p标签移动到#box2中var

box1

document.getElementById(box1);var

box2

document.getElementById(box2);var

para

document.getElementById(para);//用appendChild()移动box2.appendChild(para);/script

bodydiv

idbox2p我是box2原有段落/pp我是box2原有段落/pp我是box2原有段落/pp我是box2原有段落/p/divscript//将#box1中的p标签移动到#box2中var

box1

document.getElementById(box1);var

box2

document.getElementById(box2);var

para

document.getElementById(para);var

ps_inbox2

box2.getElementsByTagName(p);//用insertBefore()移动box2.insertBefore(para,

/body✨

idboxp我是段落0/pp我是段落1/pp我是段落2/p/divscript//删除#box里的第二个段落var

box

document.getElementById(box);var

box.getElementsByTagName(p);box.removeChild(ps[1]);/script

/body✨

cloneNode()方法可以克隆节点克隆出的节点是“孤儿节点”

语法var

还可以往cloneNode()方法里传入参数一个布尔值参数表示是否采用深度克隆传入true则深度克隆该节点的所有后代节点都会被克隆如果为false,则只克隆该节点本身。

语法var

idbox1ullipython/lilijava/lilic/lilijavascript/li/ul/divdiv

idbox2/divscript//将#box1中的列表克隆到box2中var

box1

document.getElementById(box1);var

box2

document.getElementById(box2);var

ul_inbox1

box1.getElementsByTagName(ul)[0];

//注意用getElementsByTagName得到的是一个数组要用下标才能取到里面的值//克隆var

ul_inbox1.cloneNode();//上树box2.appendChild(ul);/script

/body