Javascript小技巧之生成html元素_javascript技巧

Javascript 生成 HTML元素的方法在本文中介绍2种,第一种是比较正规的创建元素方法,第二种是利用javascript中的write()方法直接写出html元素。

方法一:

复制代码 代码如下:

   //createElement()创建input元素到obj对象中
   var obj = document.createElement('input');
   //选择要生成地点的前一个元素
   var before = document.getElementById('before');
   //设置obj元素名,值
      obj.name='name';
      obj.value='value';
      //setAttribute是可以自由定义属性的,不仅id和type,name和value也可以在这定义
      obj.setAttribute('id','idname');
      obj.setAttribute('type','typename');
      //在前一个元素后面添加obj
      before.appendChild(obj);

方法二:

复制代码 代码如下:

document.write("<inpt name='name' value='value' id='idname' type='typename'>");

这里列举了这2种生成html的<input>元素的方法,第一种比较规范,代码比较多,第二种比较少代码。

时间: 2024-11-08 19:12:18

Javascript小技巧之生成html元素_javascript技巧的相关文章

JavaScript驾驭网页-获取网页元素_javascript技巧

推荐阅读:JavaScript驾驭网页-DOM JavaScript驾驭网页-CSS与DOM 利用DOM分割HTML 利用JavaScript控制网页内容其实很像烹饪.只是不用收拾列羹剩肴,但也没有办法享受美味的成果. 不过,你将能完整网页内容的HTML构成要素:更重要的是,你将拥有替换网页成分的能力. JavaScript让你可以随心所欲地操控网页的HTML代码,从而打开各种有趣的机会之门,一切都是因为标准对象:DOM的存在 getElementById HTML标签都有一个"id"

JavaScript 随机验证码的生成实例代码_javascript技巧

随机验证码的生成 1: 主体部分 <script> var code ; //在全局 定义验证码 function createCode() { code = ""; var codeLength = 6;//验证码的长度 var checkCode = document.getElementById("checkCode"); var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D',

JavaScript实现添加、查找、删除元素_javascript技巧

代码很简单,这里就不多废话了. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试文件</title> <style> .reply { width: 500px; height: 100%; overflow: hidden; background-color:#CCC; margin-top: 10px; } .infoAre

JavaScript每天必学之基础知识_javascript技巧

基本概念  javascript是一门解释型的语言,浏览器充当解释器.js执行时,在同一个作用域内是先解释再执行.解释的时候会编译function和var这两个关键词定义的变量,编译完成后从上往下执行并向变量赋值.  区分大小写  ECMASCript中的一切(包括变量,函数名和操作符)都区分大小写.  1. 变量  变量在第一次用到时就设置于内存中,便于后来在脚本中引用.使用变量之前先进行声明.可以使用 var 关键字来进行变量声明. var count, amount, level; //

Whatever:hover 无需javascript让IE支持丰富伪类_javascript技巧

这很酷,因为这使你可以仅通过 css来对表格行(<tr>)应用鼠标滑过事件(mouseover)时的特殊效果.然而,万恶的IE,对 :hover伪类顶多只提供了有限的支持,具体支持的程度要取决于你的IE浏览器的具体版本. Whatever:hover 是一个小小的脚本,它可以迅速.自动地为IE6,IE7,IE8添加标准的 :hover.:active 和:focus 伪类支持.第三版引入了 ajax 支持,意味着通过 javascript动态添加到文档中的任意html元素也同样可以在IE中响应

javascript的理解及经典案例分析_javascript技巧

js的简介: JavaScript是一种能让你的网页更加生动活泼的程式语言,也是目前网页中设计中最容易学又最方便的语言. 你可以利用JavaScript轻易的做出亲切的欢迎讯息.漂亮的数字钟.有广告效果的跑马灯及简易的选举,还可以显示浏览器停留的时间.让这些特殊效果提高网页的可观性. javascript现在可以再网页上做很多很多事情,网页特效,操作dom,html5游戏(基于html5和JavaScript的结合),动画等等特效,还可以实现拉去后台数据(通过ajax),不仅可以做前台还可以做后

javascript随机显示背景图片的方法_javascript技巧

本文实例讲述了javascript随机显示背景图片的方法.分享给大家供大家参考.具体如下: 将以下代码加入HTML的<head></head>之间: <script LANGUAGE="JavaScript"> bg = new Array(2); //设定图片数量,如果图片数为3,这个参数就设为2,依次类推 bg[0] = 'bg1.gif' //显示的图片路径,可用http:// bg[1] = 'bg2.gif' bg[2] = 'bg3.gi

JavaScript初学者的10个迷你技巧第1/2页_javascript技巧

在之前的编程语言排行榜中,我们曾介绍过转正在即的JavaScript语言,正如文章中阐明的那样,JavaScript不仅是最具活力的脚本语言,还是是最有用的编程语言之一.因为绝大多数的浏览器都和它兼容,你可以在这些浏览器中使用它.JavaScript被接受的相当快,因为它是如此的简单,而且使用范围相当广泛.许多程序员过去常常认为JavaScript是一门"玩具语言",但是,AJAX进入市场后表现出了完全相反的一面,它让JavaScript展现出了完全不同的能力和功能. 由于这个发明的出

javascript每日必学之条件分支_javascript技巧

大家好,我们今天接着前面的讲,前面已经大概了讲了一下运算符,今天的任务主要就是讲解逻辑条件分支,循环. 我们先就来模拟一个逻辑块,就用我们经常接触到的买车票来说吧,车票的价格对不同的人价格是有差别的,但是我们都是一样的去执行买票这个行为,我们就可以把买票写成一个函数BuyTicket //代码 function BuyTicket(){ console.log("请付款200元"); } 大家看到了这个函数体,其实是有缺陷的,我们每个人去买票的时候,都是执行这一个函数,如果是军人,或者