采取Js DOM新建结点
日期：2014-05-16 浏览次数：20410 次
采用Js DOM新建结点
可以将HTML文档结构理解为一棵树。
比如下面这段，可以理解为p是div的子结点，content又是p的子结点。如果要创建新的元素，需要使用document.createElement(EleName)，如果要创建新的文本内容，需要使用document.createTextNode(textName)。采用fatherNodeName.appendChild(childNodeName)可以把子结点接到父结点上面。
<div> <p>content</p> </div>
以下是HTML主体部分
<body> <div id="testdiv"> </div> <div id="eggache"> </div> </body>
以下是js代码
window.onload = function()
{
createTestdiv();
createEggache();
}
function createTestdiv()
{
var para = document.createElement("p"); /*创建一个p结点*/
var testdiv = document.getElementById("testdiv"); /*这是准备连接p结点的位置*/
testdiv.appendChild(para);/*把p结点接上去alert(testdiv.innerHTML);*/
var txt = document.createTextNode("采用creatTestNode可以创建文本结点");/*刚才创建了p结点，里面还没有内容*/
para.appendChild(txt);/*把文本结点接在p结点上面*/
}
function createEggache()
{
var eggache = document.getElementById("eggache");
var para1 = document.createElement("p");
var txt1 = document.createTextNode("有的时候有些前端开发人员，");
var txt2 = document.createTextNode("不好好的在html中输入文字,");
var txt3 = document.createTextNode("偏要用js dom插入文字");
var emNode = document.createElement("em");
emNode.appendChild(txt2);
para1.appendChild(txt1);
para1.appendChild(emNode);
para1.appendChild(txt3);
eggache.appendChild(para1);
var para2 = document.createElement("p");
var bold = document.createElement("b");
var txt4 = document.createTextNode("我们把这种行为称之为蛋疼。");
bold.appendChild(txt4);
para2.appendChild(bold);
eggache.appendChild(para2);
}
以下是显示效果。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
