<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. android studio 中设置apk的版本号

    今天在mainfest.xml中设置版本号为2,(代码获取到的版本号无效) android:versionCode="2" android:versionName="2. ...

  2. Azure VM 远程无法登陆问题(No Remote Desktop License)

    解决方法: 打开 Wins+R=> mstsc /v: yourVMIPadress /admin mstsc /v:xx.xx.xx.xx:54738 /admin

  3. C# mongodb [下]

    概述 传统的关系数据库一般由数据库(database).表(table).记录(record)三个层次概念组成,MongoDB是由数据库(database).集合(collection).文档对象(d ...

  4. 【转载】CCombobox使用大全

    一.如何添加/删除Combo Box内容 1. 在Combo Box控件属性的Data标签里面添加,一行表示Combo Box下拉列表中的一行.换行用ctrl+回车. 2. 在程序初始化时动态添加 如 ...

  5. list 去掉重复的值

    去除List列表中重复值(3种解决方法)public static void main(String[] args) { String[] ar = { "dd", "c ...

  6. [unity3d]手游资源热更新策略探讨

    原地址:http://blog.csdn.net/dingxiaowei2013/article/details/20079683 我们学习了如何将资源进行打包.这次就可以用上场了,我们来探讨一下手游 ...

  7. crawler

    # !/usr/bin/env python# encoding:UTF-8from util import request_urlimport reimport osimport sys#from ...

  8. UVA 10523 Very Easy!!!(大数据加法、乘法)

    题意:给出N,A,计算i*A^i(i=1~N)的和.1<=N<=30,0<=A<=15. 就是大数据运算,别的没什么,注意细节之处即可. 这题还要注意两个地方: 1.考虑A=0 ...

  9. who is in front of me 解题报告

    题目描述:N(1<=N<=50005)个学生站成一个纵队,每个人只能看到前面身高比他高(严格大于)的人 求所有人中能看到的最大人数 分析:对于某个人A,设前面第一个身高比他高的人是B.如果 ...

  10. Oracle 体系结构2 - 共享和专用服务器

    1. 怎么查看自己的oracle是共享还是专用服务器 2. 怎么修改设置 3.各有什么优缺点 4.适用环境 对于专用服务器,每一个数据库连接,oracle都会分配一个专门的进程为其服务 oracle@ ...