当前位置: 首页 > 编程日记 > 正文

在js中使用createElement创建HTML对象和元素

1.创建链接

<script language="javascript"> 
var o = document.body; 
//创建链接 
function createA(url,text) 
{ 
var a = document.createElement("a"); 
a.href = url; 
a.innerHTML = text; 
a.style.color = "red"; 
o.appendChild(a); 
} 
createA("http://www.ffasp.com/","网页教学网"); 
</script> 

2.创建DIV

<script language="javascript"> 
var o = document.body; 
//创建DIV 
function createDIV(text) 
{ 
var div = document.createElement("div"); 
div.innerHTML = text; 
o.appendChild(div); 
} 
createDIV("网页教学网:http://www.ffasp.com/");    
</script> 

3.创建表单项

<script language="javascript"> 
var o = document.body; 
//创建表单项 
function createInput(sType,sValue) 
{ 
var input = document.createElement("input"); 
input.type = sType; 
input.value = sValue; 
o.appendChild(input); 
} 
createInput("button","ooo"); 
</script> 

4.创建表格

<script language="javascript"> 
var o = document.body; 
//创建表格 
function createTable(w,h,r,c) 
{ 
var table = document.createElement("table"); 
var tbody = document.createElement("tbody"); 
table.width = w; 
table.height = h; 
table.border = 1;    
for(var i=1;i<=r;i++) 
{ 
var tr = document.createElement("tr"); 
for(var j=1;j<=c;j++) 
{ 
var td = document.createElement("td"); 
td.innerHTML = i + "" + j; 
//td.appendChild(document.createTextNode(i + "" + j)); 
td.style.color = "#FF0000"; 
tr.appendChild(td); 
} 
tbody.appendChild(tr);    
} 
table.appendChild(tbody); 
o.appendChild(table); 
} 
createTable(270,270,9,9); 
</script>

转载自:http://wangyj0898.blog.51cto.com/1519857/343660/

转载于:https://www.cnblogs.com/programsky/p/4609661.html

相关文章:

Leetcode | 3Sum

Given an array S of n integers, are there elements a, b, c in S such that a b c 0? Find all unique triplets in the array which gives the sum of zero. Note:Elements in a triplet (a,b,c) must be in non-descending order. (ie, a ≤ b ≤ c)The solution set …

玩转 JavaScript 面试:何为函数式编程?

函数式编程在 JavaScript 领域着实已经成为一个热门话题。就在几年前&#xff0c;很多 JavaScript 程序员甚至都不知道啥是函数式编程&#xff0c;但是就在近三年里我看到过的每一个大型应用的代码库中都包含了函数式编程思想的大规模使用。 函数式编程(缩写为 FP)是一种通过组…

正则表达式分类 区别

原文地址&#xff1a;http://www.cnblogs.com/chengmo/archive/2010/10/10/1847287.html 正则表达式&#xff1a;在计算机科学中&#xff0c;是指一个用来描述或者匹配一系列符合某个句法规则的字符串的单个字符串。在很多文本编辑器或其他工具里&#xff0c;正则表达式通常被用…

Java项目:嘟嘟校园一卡通系统(java+JSP+Servlet+html+css+JavaScript+JQuery+Ajax+mysql)

源码获取&#xff1a;博客首页 "资源" 里下载&#xff01; 一、项目简述 功能&#xff1a;卡管理&#xff0c;卡消费&#xff0c;卡充值&#xff0c;图书借阅&#xff0c;消费&#xff0c;记录&#xff0c;注销等等功能。 二、项目运行 环境配置&#xff1a; Jdk…

OC与C语言的区别

C语言是面向过程的编程语言&#xff0c;而OC则是面向对象的编程语言。面向对象:打个比方,就是你做一次菜,让老婆做个菜,吃饭,这就是面向对象,效率高面向过程,就是每一个细节:比如你要先把或开到合适的位置.然后还要洗菜 ,等油热了,才能开始炒菜,然后调料,...,起锅,到碗里,吃饭.…

Hutool之集合工具——CollectionUtil

为什么80%的码农都做不了架构师&#xff1f;>>> 集合工具 CollectionUtil 这个工具主要增加了对数组、集合类的操作。 1. join 方法 将集合转换为字符串&#xff0c;这个方法还是挺常用&#xff0c;是StrUtil.split的反方法。这个方法的参数支持各种类型对象的集合…

15:解决IntelliJ IDEA的乱码问题

1. -Dfile-encodingsUTF-8 &#xff0c;全局&#xff1a; 转载于:https://www.cnblogs.com/gzhbk/p/10991335.html

C++ 和C 语言混合代码导致的问题

C语言中操作字符串用C运行时函数&#xff1a;strtok, strcmp, strcpy等等&#xff0c;直接操作内存。在c引入的字符串操作类std:string &#xff0c;string类中必有一个私有成员&#xff0c;其是一个char*&#xff0c;用户记录从堆上分配内存的地址&#xff0c;其在构造时分配内…

SVN详细使用教程

SVN简介&#xff1a; 为什么要使用SVN&#xff1f; 程序员在编写程序的过程中&#xff0c;每个程序员都会生成很多不同的版本&#xff0c;这就需要程序员有效的管理代码&#xff0c;在需要的时候可以迅速&#xff0c;准确取出相应的版本。 Subversion是什么&#xff1f; 它是一…

Java项目:药店信息管理系统(java+SSM+JSP+layui+maven+mysql)

源码获取&#xff1a;博客首页 "资源" 里下载&#xff01; 一、项目简述 环境配置&#xff1a; Jdk1.8 Tomcat8.5 mysql Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09; 项目技术&#xff1a; JSP Spring SpringMVC MyBatis ht…

MongoDB简单操作

MongoDB简单操作 Hadoop核心技术厂商Cloudera将在2014/06推出hadoop Ecosystem与MongoDB的整合产品,届时MongoDB与ipmala及hbase,hive一起用; 开源linux领军企业RHEL也宣布RHEL将整合MongoDB用于简化用户账号管理与LDAP一起用; 数据仓库之MPP技术 领军者莫非 Vertica,exterdata…

Windows Presentation Foundation(介绍外连接)

Windows Presentation Foundation 2011/08/12更新&#xff1a;2010 年 12 月 Windows Presentation Foundation (WPF) 为开发人员提供了统一的编程模型&#xff0c;可用于构建合并了 UI、媒体和文档的丰富 Windows 智能客户端用户体验。 欢迎使用 WPF 了解 WPF&#xff1a; WP…

Linux中与进程终止相关的信号SIGTERM,SIGKILL,SIGINT

1. SIGTERM “kill pid” 会发送SIGTERM到进程pid. This is the termination signal sent by killcommand by default. 2. SIGINT 在终端中敲入interrupt key&#xff08;DELETE或ctrlc&#xff09;会产生SIGINT信号。这个信号会被发送到进程(inforeground proc…

Java项目:嘟嘟二手书商城系统(java+JSP+Springboot+maven+mysql+ThymeLeaf+FTP)

源码获取&#xff1a;博客首页 "资源" 里下载&#xff01; 一、项目简述 功能&#xff1a; 主页显示商品&#xff1b; 所有二手书商品展示&#xff0c;可进行商品搜索&#xff1b; 点击商品进入商品详情页&#xff0c;具有立即购买和加入购物车功能&#xff0c;可增减…

SQL用法总结

1、创建数据库语句 create table persons(id INT NOT NULL AUTO_INCREMENT,lastname VARCHAR(255) NOT NULL,firstname VARCHAR(255) NOT NULL,PRIMARY KEY (ID)) DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci; 2、创建数据库时&#xff0c;PK、NN、UQ、BIN、UN、…

[leetcode] Binary Tree Preorder Traversal

Given a binary tree, return the preorder traversal of its nodes values. For example:Given binary tree {1,#,2,3}, 1\2/3return [1,2,3]. Note: Recursive solution is trivial, could you do it iteratively? 给定一棵二叉树&#xff0c;使用非递归的方法进行先序遍历。…

error C2065: “M_PI”: 未声明的标识符

1.首先&#xff0c;程序中头文件的选择&#xff0c;要选择<math.h>头文件&#xff0c;在<cmath>文件中是没有对M_PI 的定义的&#xff08;现在的<cmath>中对M_PI好像已有定义&#xff09;。2.选择&#xff1a;项目——>”XXX属性"——>配置属性—…

区分HPUX是Itanium还是PA-RISC

转自&#xff1a;http://blog.csdn.net/nbzll0920/article/details/7961232 pa-risc的产品号以rp打头&#xff0c;itanium的产品号以rx打头 用model或者uname -a命令看一下就知道了 PS: Intel安腾处理器构建在IA-64&#xff08;Intel Architecture 64&#xff09;&#xff0c;…

Java项目:食品溯源系统(java+Springboot+Maven+mybatis+Vue+mysql+wd)

源码获取&#xff1a;博客首页 "资源" 里下载&#xff01; 一、项目运行 环境配置&#xff1a; Jdk1.8 Tomcat8.5 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术…

使用sqlite保存数据返回主键

/// <summary>/// 返回insert后的主键值/// </summary>/// <param name"SQLString"></param>/// <param name"para"></param>/// <returns></returns>public static int ExecuteSql(string SQLString, Li…

Pycharm初始创建项目和环境搭建(解决aconda库文件引入不全等问题)

1.新建工程 1&#xff0e;选择新建一个Pure Python项目&#xff0c;新建项目路径可以在Location处选择。 2.Project Interpreter部分是选择新建项目所依赖的python库&#xff0c;第一个选项会在项目中简历一个venv&#xff08;virtualenv&#xff09;目录&#xff0c;这里存放…

Java项目:宠物商城系统(java+Springboot+Maven+mybatis+Vue+mysql)

源码获取&#xff1a;博客首页 "资源" 里下载&#xff01; 一、项目运行 环境配置&#xff1a; Jdk1.8 Tomcat8.5 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术…

android插件化-apkplug中以监听方式获取OSGI服务-09

2019独角兽企业重金招聘Python工程师标准>>> 我们提供 apkplug 下OSGI使用demo 源码托管地址为 http://git.oschina.net/plug/OSGIService 一 需求 通过 <<apkplug中OSGI服务基本原理-08>>我们知道怎样注册于查询OSGI Service。但查询方式必须在Servi…

网页失去焦点事件 visibilitychange

当网页失去焦点事件时会触发 visibilitychange 事件&#xff0c;可进行相关逻辑处理 如失去焦点需暂停播放 或 变更title吸引用户回来.. eg: <script>document.addEventListener(visibilitychange, function () {var isHidden document.hidden;if (isHidden) {//失去焦点…

UML类图符号 各种关系说明以及举例

UML中描述对象和类之间相互关系的方式包括&#xff1a;依赖&#xff08;Dependency&#xff09;&#xff0c;关联&#xff08;Association&#xff09;&#xff0c;聚合&#xff08;Aggregation&#xff09;&#xff0c;组合&#xff08;Composition&#xff09;&#xff0c;泛…

Java项目:医院预约挂号系统(java+SpringBoot+Maven+Vue+mysql)

源码获取&#xff1a;博客首页 "资源" 里下载&#xff01; 一、项目运行 环境配置&#xff1a; Jdk1.8 Tomcat8.5 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术…

《暗时间》读后感

什么是暗时间 什么是暗时间&#xff1f;你走路、买菜、洗脸洗手、坐公车、逛街、出游、吃饭、睡觉&#xff0c;所有这些时间都可以称为“暗时间”。我理解暗时间就是把自己平时在不知不觉中度过的&#xff0c;看不到它流逝的时光充分利用起来的时间。这些时间在作者的眼里是可以…

AbstractMap详解

/ 包:java.util// 包:java.util package java . util;Map.Entry;​同 SimpleEntry 一样,都继承了 Map.Entry 和 序列化接口。

OpenGL渲染流水中的处理步骤

显示列表:不管数据描述的是几何体还是像素,都可以被存储在显示列表中,供现在或以后使用;也可以不将数据存储在显示列表中,而是立刻对数据进行处理,这被称为直接模式.显示列表被执行时,其中存储的数据被发送出去,就像在应用程序中用直接模式发送一样.求值程序:所有的几何图元最终…

需要在method方法被调用之后,仅打印出a=100,b=200,请写出method方法的代码

通常,此流对应于显示器输出或者由主机环境或用户指定的另一个输出目标。通常,此流对应于键盘输入或者由主机环境或用户指定的另一个输入源。public static final PrintStream err“标准”错误输出流。PrintStream 是打印输出流,它继承于FilterOutputStream。第二个用的是用的是char类型,根本不是方法,当要输出方法体的时候,会给你遍历数组。通常,此流对应于显示器输出或者由主机环境或用户指定的另一个输出目标。诡异的是,如果错了,面试官对你说了一句:你回去看看,