1. <html>
  2. <head>
  3. <title>DOM对象</title>
  4.  
  5. <script type="text/javascript">
  6. function $(id) {
  7. return document.getElementById(id);
  8. }
  9. function insertText() {
  10. var val = window.prompt("请输入","");
  11. //alert(val);
  12. if(val == null || val == "")
  13. return;
  14. //创建元素节点
  15. var op = document.createElement("p");
  16. //创建文本节点
  17. var ot = document.createTextNode(val);
  18. //添加子节点 设立关系
  19. op.appendChild(ot);
  20. var panel = $("opt");
  21. //添加到页面
  22. panel.appendChild(op);
  23. }
  24.  
  25. function insertImg () {
  26. var img = document.createElement("img");
  27. //设置属性
  28. img.setAttribute("src","2.gif");
  29. $("opt").insertBefore( img, $("opt").firstChild);
  30. }
  31.  
  32. function deleteText() {
  33. //alert($("opt").lastChild.nodeName);
  34. var a = $("opt").childNodes;
  35. var b = new Array();
  36. var obj = null;
  37. for(var i = 0,j = 0; i < a.length; i++ ) {
  38. if(a[i].nodeType == Node.TEXT_NODE) {
  39. continue;
  40. }
  41. b[j] = a[i];
  42. j++;
  43. }
  44.  
  45. $("opt").removeChild(b[b.length -1]);
  46. }
  47.  
  48. </script>
  49. </head>
  50. <body>
  51. <div >DOM对象操作</div>
  52. 1.</br>
  53. <div id="opt">
  54. <p>javase</p>
  55. <p>oracle</p>
  56. <p>xml</p>
  57. </div>
  58. 2.</br>
  59. <input type="button" value="填加段落" onclick="insertText()" />
  60.  
  61. <input type="button" value="插入图片" onclick="insertImg()" />
  62.  
  63. <input type="button" value="删除最后" onclick="deleteText()" />
  64. </body>
  65. </html>

javascript DOM操作 第19节的更多相关文章

  1. javascript DOM 操作

    在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...

  2. javascript DOM 操作基础知识小结

    经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的.   DOM添加元素,使用节点属性  <!DOCTYPE html PUBLIC ...

  3. javascript DOM 操作 attribute 和 property 的区别

    javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...

  4. javascript DOM操作之 querySelector,querySelectorAll

    javascript DOM操作之 querySelector,querySelectorAll

  5. javascript DOM操作HTML文档

    文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的 ...

  6. 仅100行的JavaScript DOM操作类库

    如果你构建过Web引用程序,你可能处理过很多DOM操作.访问和操作DOM元素几乎是每一个Web应用程序的通用需求.我们我们经常从不同的控件收集信息,我们需要设置value值,修改div或span标签的 ...

  7. SVG基础以及使用Javascript DOM操作SVG

    SVG 不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序(比如谷歌地图) 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) 不适合游戏应用 Canvas 依赖分辨率 不支持事 ...

  8. 常见的原生javascript DOM操作

    1.创建元素 创建元素:document.createElement() 使用document.createElement()可以创建新元素.这个方法只接受一个参数,即要创建元素的标签名.这个标签名在 ...

  9. Javascript DOM操作实例

          最近在学DOM,但是还是没有办法很好的记住API,想找些例子来练习,网上的例子将一个个DOM对象方法挨个举例,并没有集合在一起用,效果不尽人意.所以自己写一份实例,顺便巩固下学到的知识. ...

随机推荐

  1. Codeforces Round #343 (Div. 2) A. Far Relative’s Birthday Cake

    水题 #include<iostream> #include<string> #include<algorithm> #include<cstdlib> ...

  2. ERROR hdfs.DFSClient: Failed to close file解决方法

    14/04/11 17:59:44 ERROR hdfs.DFSClient: Failed to close file /wlan_out/_temporary/_attempt_local_000 ...

  3. 解决 Provider 'System.Data.SqlServerCe.3.5' not installed. -摘自网络

    在64位机器上开发,如果使用到SqlServerCe的话,那么很可能会碰到这个问题,问题有两个方面: 1.如提示所云,没有安装SqlServerCe,只要去微软下载就好了. 2.系统已经安装SqlSe ...

  4. 问题-提示“adodataset.command”

    问题现象:提示“adodataset.command” 问题原因:原因不明,希望高人指点. 问题处理:如果报adodataset.command ,如果忽略将删除控件的错误时,你应该可以看一看是不是在 ...

  5. 用Quartus II 建立一个工程模板,以后新建工程时无需再配置参数

    以前用Quartus II 每次新建工程时,都要设置工程名,选择工程路径,选择芯片型号等等,好麻烦呀!可不可以建一个工程模板,以后新建工程时直接改相应文件名就可以呀!后来我一琢磨,感觉也不是不可以.因 ...

  6. 使用Ready2Search来定制Firefox和Chrome的搜索框

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:使用Ready2Search来定制Firefox和Chrome的搜索框.

  7. Oracle--SQL Developer创建连接及使用

    安装好Oracle之后,有几种方式可以来管理Oracle中的数据库,首先就是登陆网页版的界面:https://localhost:1158/em,这种方式管理的东西太多,使用起来有点不方便,第二种方式 ...

  8. 谷歌Flash不是最新版

     http://www.adobe.com/support/flashplayer/debug_downloads.html

  9. linux cat 命令详解--转

    使用方式:cat [-AbeEnstTuv] [--help] [--version] fileName 说明:把档案串连接后传到基本输出(萤幕或加 > fileName 到另一个档案) 参数: ...

  10. hdu1250(Java)大数相加的问题

    Hat's Fibonacci Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tota ...