jquery动态创建div与input的实例代码

无意中发现的，做为收藏，以备后绪查看时用。

实例如下：

<html>
<head>
<title>jjquery动态创建div与input</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script>
<!--动态创建div-->
$(function (){
$("<div>",{
id:'text',
text:'this is a test',
"class":"text",
click:function(){
$(this).toggleClass('test');
}
}).appendTo("body");
})
<!--动态创建input-->
$(function(){
$("<input>",{
type:'text',
val:'text',
function:function(){
$(this).addClass('active');
},
focusout:function(){
$(this).removeClass('active');
}
}).appendTo("div");
})
</script>
</head>
<body></body>
</html>

以上就是小编为大家带来的jquery动态创建div与input的实例代码全部内容了，希望大家多多支持我们~

赞 (0)

相关推荐

  • jQuery实现动态添加和删除一个div

    本文主要给大家简单介绍一下如何动态的在一个元素添加和删除一个div,希望能够得到举一反三之效. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> #father { width:150px; height:150px; background-color:red; } #father div

  • jquery创建div 实现代码

    复制代码 代码如下: var boardDiv = "<div style='background:white;width:100%;height:100%;z-index:999;position:absolute;top:0;margin-top:100px;'>加载中...<\/div>"; $(window).load(function(){ //window.alert("ok"); $(document.body).append(

  • jquery动态添加删除div 具体实现

    复制代码 代码如下: <script type="text/javascript" src="jquery.js"></script><body><form action="" method="post" enctype="multipart/form-data"><label>请选择上传的图片</label><a href=&q

  • JQuery DIV 动态隐藏和显示的方法

    1. 如果在载入是隐藏: <head> <script language="javascript"> function HideWeekMonth() { $("#tt1").hide(); $("#tt2").hide(); } </script> </head> <body onLoad="HideWeekMonth()"> </body> 2. 动态

  • javascript与jquery动态创建html元素示例

    本文实例讲述了javascript与jquery动态创建html元素的方法.分享给大家供大家参考,具体如下: 1.javascript创建元素 创建select var select = document.createElement("select"); elect.options[0] = new Option("加载项1", "value1"); select.options[1] = new Option("加载项2",

  • jquery动态创建div与input的实例代码

    无意中发现的,做为收藏,以备后绪查看时用. 实例如下: <html> <head> <title>jjquery动态创建div与input</title> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script> <!--动态创建div--> $(function (){ $(&

  • JavaScript动态创建div属性和样式示例代码

    1.创建div元素: Javascript代码 复制代码 代码如下: <scripttypescripttype="text/javascript"> functioncreateElement(){ varcreateDiv=document.createElement("div"); createDiv.innerHTML="Testcreateadivelement!"; document.body.appendChild(cr

  • jQuery实现动态添加和删除input框实例代码

    本文实例为大家分享了jQuery实现动态添加和删除input框的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选项</title> <script type="text/javascript" src="js/jquery-1.8.3.js"></s

  • jQuery动态添加与删除tr行实例代码

    jQuery动态添加与删除tr行实例代码

    这篇文章给大家分享的是一个用Jquery实现动态添加和删除tr行的小例子 下面是实现的样子,当然没有样式: 点击添加按钮可以添加一行: 点击删除可以删除本行: 基本功能是这样,下面是代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- 这里是引用了一个百度的jquery库,可换为本地jquery

  • JavaScript动态创建div等元素实例讲解

    JavaScript动态创建div等元素实例讲解

    本文实例讲解了JavaScript动态创建div等元素的详细代码,分享给大家供大家参考,具体内容如下 效果图: 为了节省时间,就直接贴代码了! <html> <head> <title>js动态创建div等元素实例</title> <style type="text/css"> </style> </head> <body> <script language="javascr

  • jQuery动态创建html元素的常用方法汇总

    jQuery动态创建html元素的常用方法汇总

    本文实例讲述了jQuery动态创建html元素的常用方法,在使用jQuery进行WEB程序设计的时候非常有用.分享给大家供大家参考.具体方法如下: 一般来说,可以通过以下几种方式动态创建html元素: 1.使用jQuery创建元素的语法 2.把动态内容存放到数组中,再遍历数组动态创建html元素 3.使用模版 1.使用jQuery动态创建元素追加到jQuery对象上. <meta http-equiv="Content-Type" content="text/html;

  • jQuery动态创建元素以及追加节点的实现方法

    我们知道js中有三种动态创建元素的方法,jQuery中也可以动态的创建元素 例如: var str = $("<a href='http://www.jb51.net'>我们</a>"); $("ul").append(str); //将动态创建的str元素追加到ul下面 追加节点 在js当中追加节点的方法是appendChild(节点元素)和insertBefor(节点元素,位置),在jQuery中是 append 追加在父元素的最后一个子

  • jquery动态改变div宽度和高度

    完整代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jque

  • jquery 动态创建元素的方式介绍及应用

    一般动态创建元素可以通过两种方式 1.Dom HTml 复制代码 代码如下: var select = document.createElement("select"); select.options[0] = new Option("加载项1", "value1"); select.options[1] = new Option("加载项2", "value2"); select.size = "

随机推荐