可以将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);
}
以下是显示效果。
分享到:
相关推荐
教你javascript克隆dom,浅复制dom,深复制dom
经典之作《javascript dom编程艺术》源码。通过一个实际案例,讲述了原生的javascript操作dom的使用方法,以及操作dom中应该注意的一些事项。
JavaScript DOM编程艺术 --全
JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源...
js_HTML_Dom操作练习,比较基础的
JavaScriptDOM编程艺术(第2版)PDF版本下载
第1章 JavaScript简史 1.1 JavaScript的起源 1.2 DOM 1.3 浏览器战争 1.3.1 DHTML 1.3.2 浏览器之间的冲突 1.4 制定标准 1.4.1 浏览器以外的考虑 1.4.2 浏览器战争的结局 1.4.3 崭新的起点 1.5 小结 第2章 ...
JavascriptDOM基本操作 dom 精品操作
dom api手册,javascript dom,js dom,java dom
本 书在简洁明快地讲述JavaScript和DOM的基本知识之后,通过几个实例演示了专业水准的网页开发技术,透彻阐述了平稳退化等一批至关重要的 JavaScript编程原则和最佳实践,并全面探讨了HTML5以及jQuery等JavaScript库...
教程名称:Javascript DOM编程视频教程(17讲) 课程目录:【】1.JavascriptDOM编程_在什么位置编写JS代码【】10.JavascriptDOM编程_删除节点【】11.JavascriptDOM编程_添加删除节点的实验...
实现使用JavaScript DOM 操作实现网页局部刷新
javascript_DOM,javascript_DOM,javascript_DOM,javascript_DOM
JavaScript DOM编程艺术,高清资源,无比经典,值得拥有
英文原版DOM Scripting Web Design with JavaScript and the Document Object Model,语言通俗易懂,适合dom和javascript初学者。
JavaScript.DOM编程艺术(第2版)源码
javascript dom2 源码及pdf
JavaScript Dom编程艺术JavaScript Dom编程艺术JavaScript Dom编程艺术JavaScript Dom编程艺术JavaScript Dom编程艺术JavaScript Dom编程艺术JavaScript Dom编程艺术
本书注重理论与实践的结合,全面讲述高级的DOM脚本编程。全书分为3个部分:第一部分“深入理解DOM脚本编程”,涉及W3CDOM规范的各方面,包括非标准的浏览器支持和不支持的内容;第二部分“浏览器外部通信”,以Ajax...
javascript DOM 编程艺术源码 很详细 每一课都有