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.jb51.net/","牛C网");
</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("牛C网：http://www.jb51.net/");
</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>

赞 (0)

相关推荐

  • Javascript createElement和innerHTML增加页面元素的性能对比

    最近遇到js的效率问题,是关于在页面中新增元素的问题. 假设我们有页面如下: 复制代码 代码如下: <HTML> <HEAD> </HEAD> <BODY> <div id="div1"></div> </BODY> <script> // 脚本位置 </script> </HTML> 现在,我们要往div1中添加对象,大家都知道在为web页面增加一个元素时可以使用如

  • 动态加载js文件 document.createElement

    复制代码 代码如下: var Rash=true; var msg=""; function norash() { if (confirm("确定要取消吗")) Rash=false; } function rashit() { setInterval('getrss()',Inttime); } function getrss() {         if (Rash==true)         {         head=document.getElemen

  • document.createElement("A")比较不错的属性

    搞了一天,终于把A里面的属性弄出来 代码1: [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 代码2: New Document function newelement(){ var a=document.createElement("a"); a.href="javascript:alert('A link.')"; a.innerHTML="aaa"; var img=new Image(); img.src="http

  • createElement与createDocumentFragment的点点区别小结

    网上可以搜到的大部分都是说使用createDocumentFragment主要是因为避免因createElement多次添加到document.body引起的效率问题,比如: 复制代码 代码如下: var arrText=["1","2","3","4","5","6","7","8","9","10"];

  • javascript createElement()创建input不能设置name属性的解决方法

    其中obj.name = "select";这句话并不能起到预期的作用,无论是看生成后的HTML代码还是观察使用document.getElementsByName()获取的数组长度,都会发现这个name设置并没有起作用.当然这种情况只出现在IE6和IE7中,而在FireFox中是没有问题的. Test function addInput(){ var div = document.getElementById("testDiv"); var obj = docum

  • IE中createElement需要注意的一个问题

    代码如下: 复制代码 代码如下: var $alertPanel = $( document.createElement("div") ); $alertPanel.css("width","120px").css("height","50px").text("Hello CssRain!"); $('body',parent.document).append($alertPanel);

  • document.createElement()用法

    document.createElement()是在对象中创建一个对象,要与appendChild() 或 insertBefore()方法联合使用.其中,appendChild() 方法在节点的子节点列表末添加新的子节点.insertBefore() 方法在节点的子节点列表任意位置插入新的节点. 下面,举例说明document.createElement()的用法.<div id="board"></div>例1: 复制代码 代码如下: <script

  • document.createElement()用法及注意事项(ff下不兼容)

    今天处理了一个日期选择器的ie和ff的兼容问题,本来这种情况就很难找错误,找了好久才把错误定位到js中创建元素的方法document.createElement(),这个方法在ie下支持这样创建元素 复制代码 代码如下: var inputObj    = document.createElement      ("<input type='text' size='8' style='border:0px;border-bottom:2px solid #c0c0c0;' " r

  • getElementByID、createElement、appendChild几个DHTML元素第1/2页

    DOCUMENT中的任一个标签: 1.getElementById() getElementById()可以访问DOCUMENT中的某一特定元素,顾名思义,就是通过ID来取得元素,所以只能访问设置了ID的元素. 比如说有一个DIV的ID为docid: <div id="docid"></div> 那么就可以用getElementById("docid")来获得这个元素. <html> <head> <meta h

  • 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);

  • 动态创建按钮的JavaScript代码

    废话不多说了,直接给大家贴js代码了,具体代码如下所示: <!doctype html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <script type="text/javascript"> var i = 0; function addInput(){ var o = document.crea

  • MyBatis动态创建表的实例代码

    项目中业务需求的不同,有时候我们需要动态操作数据表(如:动态建表.操作表字段等).常见的我们会把日志.设备实时位置信息等存入数据表,并且以一定时间段生成一个表来存储,log_201806.log_201807等.在这里我们用MyBatis实现,会用到动态SQL. 动态SQL是Mybatis的强大特性之一,MyBatis在对sql语句进行预编译之前,会对sql进行动态解析,解析为一个BoundSql对象,也是在此对动态sql进行处理. 在动态sql解析过程中,#{ }与${ }的效果是不一样的:

  • 如何让动态插入的javascript脚本代码跑起来。

    首先,声明方法很多种,直接间接的方法都有,只罗列一般情况下的两种模式: 假设我们要装入的代码是a.js: var foo=function(){ document.write("I am a.js content foo() function by never-online"); }; 一.直接插入src,这种方法简单而直接,但有局限性, 1) <script> var x=document.createElement("SCRIPT"); x.src=

  • javascript创建createXmlHttpRequest对象示例代码

    复制代码 代码如下: var xmlHttp; function createXmlHttpRequest()    {        if(window.XMLHttpRequest)        {            xmlHttp=new XMLHttpRequest(); if(xmlHttp.overrideMimeType)                {                    xmlHttp.overrideMimeType("text/xml")

  • 基于Jquery的动态创建DOM元素的代码

    动态创建div: 复制代码 代码如下: $(function(){ $("<div>",{ id: 'test', text: 'this is a test', "class": "test", click: function(){ $(this).toggleClass('test'); } }).appendTo("body"); }) 动态创建input: 复制代码 代码如下: $(function(){

  • js 用CreateElement动态创建标签示例

    //定义方法创建一个label标签 //*************************************// 复制代码 代码如下: var createLabel = function(id, name, value) { var label_var = document.createElement("label"); var label_id = document.createAttribute("id"); label_id.nodeValue = i

  • javascript动态创建及删除元素的方法

    本文实例讲述了javascript动态创建及删除元素的方法.分享给大家供大家参考.具体分析如下: 在DOM中我们可以方便快速的动态删除与删除dom元素,这里我们就来给各位朋友简单的介绍一下. 例1: 动态创建一个按钮 复制代码 代码如下: <html> <head> <title>动态创建按钮</title> <script language="javascript"> var a,b,ab,ba,c; function cr

  • C#实现动态创建接口并调用的实例

    C#实现动态创建接口并调用的实例

    本文简单介绍如何动态创建接口interface的实现实例对象,包含两个知识点: 1.如何获取接口interface的所有实现实例对象? 2.如何判断实例对象的构造函数是否有参数? 准备工作 首先新建一个名为IAnimal的interface接口对象,并定义一个Cry方法. namespace DynamicCreate { /// <summary> /// 动物 /// </summary> public interface IAnimal { /// <summary&g

  • 存储过程返回数组对象示例代码

    其实就相当于返回List里面放的对象数据,定义如下 1.创建存储过程对象 复制代码 代码如下: CREATE OR REPLACE TYPE "T_ACCOUNT_MONTH" as object( ACCOUNT_ID NUMBER, INIT_AMOUNT NUMBER, DEBIT_AMOUNT NUMBER, CREDIT_AMOUNT NUMBER ) 2.创建存数过程数组 复制代码 代码如下: CREATE OR REPLACE TYPE "T_ACCOUNT_M

随机推荐