<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>无标题文档</title>

 <script type="text/javascript">

 window.onload=function (){

     var $ = function(id){

         return document.getElementById(id);

     }

     var oBtn=$('btn1');

     var oTxt=$('txt1');

     var oUl=$('ul1');

     var aLi=oUl.getElementsByTagName('li');

     oBtn.onclick=function (){

         //用DOM方法创建出来的元素，和普通元素没有任何区别

         var oLi=document.createElement('li');

         oLi.innerHTML=oTxt.value;

         //oUl.appendChild(oLi); 用此句会添加到最后，下面会添加到最前面

         if(aLi.length>0){

             oUl.insertBefore(oLi, aLi[0]); // insertBefore(节点，在谁之前插入)

         }

         else{

             oUl.appendChild(oLi); // 用法： appendChild(节点);

         }

     };

 };

 </script>

 </head>

 <body>

 <input id="txt1" type="text" />

 <input id="btn1" type="button" value="创建Li" />

 <ul id="ul1">

 </ul>

 </body>

 </html>

Document类型定义了创建Element和Text对象的方法，Node类型定义了在节点树中插入、删除和替换的方法。

 // 从指定的URL，异步加载和执行脚本

 function loadasync(url){

     var head = document.getElementsByTagName('head')[0];  //查找文档的<head>标签

     var s = document.createElement('script'); //创建一个<script>元素

     s.src = url; //设置它的src属性值

     head.appendChild(s);

 }

createElement 创建DOM元素的更多相关文章

  1. jQuery基础之（四）jQuery创建DOM元素

    利用DOM方法创建元素节点,通常要将document.createElement().document.createTextNode().appendChild()配合使用,十分麻烦. 而jQuery ...

  2. 动态创建dom元素

    效果图如上所示: 思维nav:就相当于qq空间发表动态(说说),在输入框里输入内容,点击提交(发表),内容就呈现在下面的动态栏里.我这里是准备写一个招聘的app,大家可以随便想象下哪些情况会遇到动态创 ...

  3. react快速上手一（使用js语法，创建虚拟DOM元素）

    1.装包,引包 首先需要安装两个包 react ,react-dom cnpm i react react-dom 介绍下这两个包: react:专门用来创建React组件,组件生命周期等这些东西. ...

  4. JS DOM元素的操作（创建，添加，删除，和修改属性）

    1.1 创建 DOM 元素以及相应的追加方式 1.1.1  创建:document.createElement('div'); 添加: fatherEle.appendChild(ele); appe ...

  5. jQuery 数据 DOM 元素 核心 属性

    jQuery 参考手册 - 数据 .clearQueue() 从序列中删除仍未运行的所有项目 .clearQueue(queueName) $("div").clearQueue( ...

  6. jQuery碎语(1) 基础、选择要操作的元素、处理DOM元素

    1.基础 jquery对象集: $():jquery对象集合 获取jquery对象集中的元素: 使用索引获取包装器中的javascript元素:var temp = $('img[alt]')[0] ...

  7. Phaser游戏框架与HTML Dom元素之间的通信交互

    本想按照PHASER的HTML Dom元素官方实例:http://labs.phaser.io/index.html?dir=game%20objects/dom%20element/&q=  ...

  8. dom元素分屏加载

    载入一个内容较多的页面的时候,如果不做任何处理,则会在一开始就把全部内容加载出来,影响了性能和体验,所以现在常用分屏加载的功能,就是dom内容出现在屏幕可视范围内的时候,再加载dom节点,起到优化的作 ...

  9. DOM操作-动态创建网页元素

    动态创建新的DOM元素,是JavaScript操作网页对象模型的重要手段之一 代码: <!DOCTYPE html> <html> <head> <title ...

随机推荐

  1. For和While在C和MATLAB中的区别——MATLAB的大坑

    For和while是常见的循环关键字,在许多语言中都是通用的.但是想必不是所有人,都被其中的区别困扰过,尤其是MATLAB“程序员”. x=[,,,,,,]; i=; while i<=leng ...

  2. mysql 的物理结构

    mysql 的物理结构 跟着小辉老师学来的mysql知识,由于本人记性不好,但又觉得它很重要故把它记了下来,方便自己以后回忆,也希望能对大家有所帮助. 以下内容来自 小辉 老师的mysql教程,和部分 ...

  3. CSS3技巧：利用css3径向渐变做一张优惠券（转）

    在很多购物网站上都能看到优惠券,代金券,什么什么的券,但基本都是图片直接放上去,那么你有没有想过css来做一个呢,反正我是这样想过.那么你怎么做呢,切图做背景平铺边缘,嗯,有这样想过,如今css3技术 ...

  4. 中国移动MM Android/OPhone付费SDK--MMBillingSDK，集成问题总结

    原地址:http://www.j2megame.com/html/xwzx/ty/2916.html 中国移动MM Android/OPhone付费SDK--MMBillingSDK,集成问题总结 近 ...

  5. Web Server 和 HTTP协议(转)

    转自:http://www.kuqin.com/shuoit/20150809/347488.html 一直在找实习,有点什么东西直接就在evernote里面记了,也没时间来更新到这里.找实习真是个蛋 ...

  6. CentOS安装视频播放器SMPlayer

    首先下载rpmforg,下载对应的版本,就是对应CentOS版本,还有32位与64位也要对应上.地址如下: http://wiki.centos.org/AdditionalResources/Rep ...

  7. 为什么android的R类要定义成16进制

    联想到c语言中的宏定义:我想是一个原因 如: #define SDL_INIT_TIMER 0x00000001 #define SDL_INIT_AUDIO 0x00000010 #define S ...

  8. 架构探险——从零开始写Java Web框架》第二章照作

    沉下来慢慢看实现了. 越来越觉得可以和DJANGO作对比. package org.smart4j.chapter2.model; /** * Created by sahara on 2016/3/ ...

  9. 【mongoDB运维篇④】Shard 分片集群

    简述 为何要分片 减少单机请求数,降低单机负载,提高总负载 减少单机的存储空间,提高总存空间. 常见的mongodb sharding 服务器架构 要构建一个 MongoDB Sharding Clu ...

  10. java工具类系列 （四.SerializationUtils）

    java工具类系列 (四.SerializationUtils) SerializationUtils该类为序列化工具类,也是lang包下的工具,主要用于序列化操作 import java.io.Se ...