<!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. JSP自定义标签(转）

    1. TagSupport与BodyTagSupport的区别 TagSupport与BodyTagSupport的区别主要是标签处理类是否需要与标签体交互,如果不需要交互的就用TagSupport, ...

  2. flutter 小知识

    隐藏控件,占空间 new Offstage( offstage: true, //这里控制 child: Container(color: Colors.blue,height: 100.0,), ) ...

  3. python redis demo

    上代码,redis-demo #!/usr/bin/env python #_*_ coding:UTF-8 _*_ import redis ####配置参数 host = '192.168.0.1 ...

  4. LightOJ 1203 Guarding Bananas (凸包最小顶角)

    题目链接:LightOJ 1203 Problem Description Once there was a lazy monkey in a forest. But he loved banana ...

  5. OMG that's another blog!

    目录 1.Beginning 2.then 1.Beginning we'v learnt how to ask file from our own computer and tried to bui ...

  6. 最长递增子序列nlogn的做法

    费了好大劲写完的  用线段树维护的 nlogn的做法再看了一下 大神们写的 nlogn  额差的好远我写的又多又慢  大神们写的又少又快时间  空间  代码量 哪个都赶不上大佬们的代码 //这是我写的 ...

  7. Spring入门（三）

    测试Spring Bean的自动化装配 方式一:使用配置文件方式启动组件扫描 准备一个接口 package soundsystem; public interface CompactDisc { vo ...

  8. wkhtmltopdf linux下html转pdf

    https://blog.csdn.net/wujunlei1595848/article/details/91129197 https://github.com/wkhtmltopdf/wkhtml ...

  9. C/C++中的return和exit

    return:只是退出函数;  ~是关键字. exit:是退出进程; ~是函数名. 整理自:https://www.cnblogs.com/cxchanpin/p/6927025.html

  10. 解决在移动端上 click事件延迟300 毫秒的问题 fastclick.js

    1 为什么会发生延迟300毫秒的问题 移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击.为了能够立即响应用户的点击事件,才有了FastClick ...