<!DOCTYPE html>

<html lang="en">

<head>

 <script src="http://code.jquery.com/jquery-1.11.3.js"></script>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

<script type="text/javascript">

// jQuery(document).ready(function($) {

//     $('li:first').append('<p>新的节点</p>');

// });

window.onload=function(){

var rightdiv = document.getElementById('nav');

//这里用id获取不到的原因是，要先执行到下面的li时，才能获取到，而document.createElement是不需要网页的执行就可以直接继续下去的，从而不会包appendChild属性值为空的情况

     var rightaaron = document.createElement("p");

     rightaaron.innerHTML = "动态创建DIV元素节点";

     //2个div合并成包含关系

     rightdiv.appendChild(rightaaron)

     //绘制到页面body

     document.body.appendChild(rightdiv)

};

</script>

<ul >

    <li id='nav'>

        <p href="">旧的节点</p>

    </li>

    <li>

        <p href="">旧的节点</p>

    </li>

</ul>

</body>

</html>

因为var rightdiv = document.getElementById('nav');这句话必须要等到
<ul >

    <li id='nav'>

        <p href="">旧的节点</p>

    </li>

    <li>

        <p href="">旧的节点</p>

    </li>

</ul>这段代码执行到时才能够获取到id，所以需要加个winodw.onload来获取
网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行，否则可能导致无法获取对象的情况

直接用document.createElement()是不需要等加载的就可以直接执行。
 

js用document.getElementById时要注意！的更多相关文章

  1. 创建母版页导致js出现“ 'document.getElementById(...)' 为空或不是对象”错误

    导读:一个控件在设计时的ID往往不同于生成页面后的ID,为了获得控件客户端ID,我们可以从生成的页面入手,冷静思考,把握主次,从底层框架入手 本文将为大家介绍一下 ASP.NET中在创建母版页时引来的 ...

  2. JS中 document.getElementById 对象

    Document 对象 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 提示:Document 对 ...

  3. ASP.NET#使用母版时，如果要使用js中的getElementById()方法取得某个内容页的元素时要注意的问题

    当使用母版,要使用js中的getElementById()方法取得某个内容页的元素时,所选取的id并不是母版中内容页的id,而是在设计内容页时设定的id例子:母版页: ...... <head ...

  4. JS函数动作分层结构详解及Document.getElementById 释义 js及cs数据类型区别 事件 函数 变量 script标签 var function

    html +css 静态页面 js     动态 交互   原理: js就是修改样式, 比如弹出一个对话框. 弹出的过程就是这个框由disable 变成display:enable. 又或者当鼠标指向 ...

  5. 在使用document.getElementById('xxx').files[0]时，关于计算图片大小

    在使用文件上传属性时,一直好奇图片上传的大小时如何计算的,最近在使用中认识到的计算方式:  首先,图片大小的存储基本单位是字节(byte).每个字节是由8个比特(bit)组成.所以,一个字节在十进制中 ...

  6. function $(id){ return document.getElementById(id); }导致所有的js不能用解决办法。。。。

    function $(id){ return document.getElementById(id); } document.getElementById(id) 是获得id这个元素的. 相当于定义了 ...

  7. js 节点 document html css 表单节点操作

    js 节点 document html css 表单节点操作 节点操作:访问.属性.创建 (1)节点的访问:firstChild.lastChild.childNodes.parentChild(父子 ...

  8. JS的Document属性和方法小结

    Document想必大家并不陌生吧,在使用js的过程中会经常遇到它,那么它有哪些属性.哪些方法,在本文将以示例为大家详细介绍下,希望对大家有所帮助 document.title //设置文档标题等价于 ...

  9. JS中document.createElement()用法及注意事项

    今天处理了一个日期选择器的ie和ff的兼容问题,本来这种情况就很难找错误,找了好久才把错误定位到js中创建元素的方法document.createElement(),这个方法在ie下支持这样创建元素 ...

随机推荐

  1. jq鼠标移入和移出事件

    前几天帮朋友做了一个单页面,其中有个效果就是鼠标移动到头像上变换头像样式,当鼠标移出时恢复头像样式.当时没多想,脑子就蹦出了mouseover,mouseout两个方法. 但是在编写页面的过程中,无论 ...

  2. CF D. Walking Between Houses (贪心）

    题意: 现在有n个房子排成一列,编号为1~n,起初你在第1个房子里,现在你要进行k次移动,每次移动一都可以从一个房子i移动到另外一个其他的房子j里(i != j),移动的距离为|j - i|.问你进过 ...

  3. php开发面试题---数据库SQL调优的几种方式

    php开发面试题---数据库SQL调优的几种方式 一.总结 一句话总结: 创建索引:尽量避免使用or或者like,或者sql中的正则 存储查询中间结果 可以加sphinx搜索技术 查询优化 主从数据库 ...

  4. Sleepy与DbgHlp库学习

    参考:http://msdn.microsoft.com/en-us/library/windows/desktop/ms679291(v=vs.85).aspx http://msdn.micros ...

  5. Linux SSH证书登陆

    创建证书 ssh-keygen -t rsa -b 4096 -C "your_email@example.com" 证书导入以后,执行 eval "$(ssh-agen ...

  6. 【Linux】- Systemd 实战篇

    转自:阮一峰的网络日志 一.开机启动 对于那些支持 Systemd 的软件,安装的时候,会自动在/usr/lib/systemd/system目录添加一个配置文件. 如果你想让该软件开机启动,就执行下 ...

  7. 7_springboot2.x开发热部署

    概述:在开发中我们修改一个Java文件后想看到效果不得不重启应用,这导致大量时间花费,我们希望不重启应用的情况下,程序可以自动部署(热部署).有以下四种情况,如何能实现热部署. 1.模板引擎 在Spr ...

  8. 一键获取Android的appActvity和PackName

    大家平常写Appium自动化时,可能写脚本半小时,得有5分钟用来去看Activity,大部分都是通过adb命令的方式来获取.为了提高效率,可以把这个命令放到python里去执行,然后根据规则去筛选出自 ...

  9. 【HDOJ】P5056 Boring count

    题目意思是给你一个字符串和K,让你求其中有多少个字串中每个字母的出现次数不超过K次,可以等于 题目意思是很简单的,写起来也很简单,不过就是注意最后要是long long要不WA了,555~ #incl ...

  10. Java中++操作是同步的吗？为什么？

    不是同步的 因为++操作分为三步实现 内存到寄存器 寄存器自增操作 寄存器写回内存 这三步每一步都可以被打断,不是原子操作,所以不是同步操作