JavaScript基础之插入DOM
来源:互联网 发布:mac移动桌面文件夹 编辑:程序博客网 时间:2024/06/07 07:01
一个是使用appendChild,把一个子节点添加到父节点的最后一个子节点。例如:
<!-- HTML结构 --><p id="js">JavaScript</p><div id="list"> <p id="java">Java</p> <p id="python">Python</p> <p id="scheme">Scheme</p></div>
把
JavaScript
添加到的最后一项:
var js=document.getElementId('js'); list=document.getElementId('list');list.appendChild(js);
现在,HTML结构变成了这样:
<!-- HTML结构 --><div id="list"> <p id="java">Java</p> <p id="python">Python</p> <p id="scheme">Scheme</p> <p id="js">JavaScript</p></div>
因为我们插入的js节点已经存在于当前的文档树,因此这个节点首先会从原先的位置删除,再插入到新的位置。
更多的时候我们会从零创建一个新的节点,然后插入到指定位置:
var list=document.getElementId('list'); haskell=document.createElement('p');haskell.id='haskell';haskell.innerHTML='haskell';list.appendChild(haskell);
这样我们就动态添加了一个新的节点:
<!-- HTML结构 --><div id="list"> <p id="java">Java</p> <p id="python">Python</p> <p id="scheme">Scheme</p> <p id="haskell">Haskell</p></div>
动态创建一个节点然后添加到DOM树中,可以实现很多功能。举个例子,下面的代码动态创建了一个
var d = document.createElement('style');d.setAttribute('type', 'text/css');d.innerHTML = 'p { color: red }';document.getElementsByTagName('head')[0].appendChild(d);
insertBefore
如果我们要把子节点插入到指定的位置怎么办?可以使用parentElement.insertBefore(newElement, referenceElement);,子节点会插入到referenceElement之前。
还是以上面的HTML为例,假定我们要把Haskell插入到Python之前:
<!-- HTML结构 --><div id="list"> <p id="java">Java</p> <p id="python">Python</p> <p id="scheme">Scheme</p></div>
可以这么写:
var list = document.getElementById('list'), ref = document.getElementById('python'), haskell = document.createElement('p');haskell.id = 'haskell';haskell.innerText = 'Haskell';list.insertBefore(haskell, ref);
新的HTML结构如下:
<!-- HTML结构 --><div id="list"> <p id="java">Java</p> <p id="haskell">Haskell</p> <p id="python">Python</p> <p id="scheme">Scheme</p></div>
阅读全文
0 0
- JavaScript基础之插入DOM
- javascript基础之DOM
- javaScript基础之BOM&&DOM
- JavaScript 基础之BOM&DOM
- JavaScript基础之操作DOM
- JavaScript基础之更新DOM
- JavaScript基础之删除DOM
- JavaScript教程系列之----DOM基础
- [学习笔记]JavaScript之DOM基础
- JavaScript DOM 编程之基础篇
- [学习笔记]JavaScript之DOM基础
- javascript DOM编程学习心得之基础
- JavaScript基础之JQuery与DOM
- javascript之DOM编程设置节点插入节点
- Javascript DOM基础
- javascript DOM操作基础
- javascript DOM操作基础
- javascript DOM操作基础
- java集合类
- 机器学习的意义(转载)
- JDBC简单分页
- 关闭 oracle dblink 功能
- linux 查看目录文件的大小
- JavaScript基础之插入DOM
- IOS画虚线
- Android进程保活招式大全
- Android中使用AIDL时的跨进程回调—Server回调Client
- Volley的简单使用
- Android中WebView使用5,js调java方法
- C++primer plus day2
- PAT (Basic Level) Practise (中文) 1068. 万绿丛中一点红(20)
- PHP+MySql实现一个简单的留言板