动态制造开关的JavaScript代码

by admin on 2019年9月3日

1.创建div元素:

废话不多说了,直接给大家贴js代码了,具体代码如下所示:

本文实例讲解了JavaScript动态创建div等元素的详细代码,分享给大家供大家参考,具体内容如下

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

Javascript代码

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script type="text/javascript">
var i = 0;
function addInput(){
var o = document.createElement('input');
o.type = 'button';
o.value = '按钮'+ i++;
if(o.attachEvent){
o.attachEvent('onclick',addInput)
}else{
o.addEventListener('click',addInput)
}
document.body.appendChild(o);
o = null;
}
</script>
</head>
<body onload="addInput()">
</body>
</html>

效果图:

实例如下:

复制代码 代码如下:

以上所述是小编给大家介绍的动态创建按钮的JavaScript代码,希望对大家有所帮助。

奥门威尼斯网址 1

<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>

<scripttypescripttype=”text/javascript”>
functioncreateElement(){
varcreateDiv=document.createElement(“div”);
createDiv.innerHTML=”Testcreateadivelement!”;
document.body.appendChild(createDiv);
}
</script>

奥门威尼斯网址,您可能感兴趣的文章:

  • js 动态创建 html元素
  • js实现动态创建的元素绑定事件
  • JS使用eval()动态创建变量的方法
  • JS动态创建元素的两种方法
  • JavaScript如何动态创建table表格
  • JS动态创建DOM元素的方法
  • js动态创建及移除div的方法
  • javascript实现dom动态创建省市纵向列表菜单的方法
  • jQuery动态创建html元素的常用方法汇总
  • jquery
    动态创建元素的方式介绍及应用
  • 基于jquery的动态创建表格的插件
  • javascript与jquery动态创建html元素示例

为了节省时间,就直接贴代码了!

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

<scripttypescripttype=”text/javascript”>
functioncreateElement(){
varcreateDiv=document.createElement(“div”);
createDiv.innerHTML=”Testcreateadivelement!”;
document.body.appendChild(createDiv);
divFileitem.appendChild(divName); <!– no “document” if not
body–>
}
</script>

<html> 
  <head> 
  <title>js动态创建div等元素实例</title> 
  <style type="text/css"> 
  </style> 
  </head> 
  <body> 
  <script language="javascript"> 
    var Test={ 
      createDiv:function(){ 
        var div = document.createElement('div'); 
        div.id="createDiv"; 
        div.style.cssText = 'border:1px solid red; width:200px; z-index:100; height:20px;'; 
        document.body.appendChild(div); 
      }, 
      appendDivChild:function(){ 
        var div = document.createElement('div'); 
        div.id="appendDivChild"; 
        div.style.cssText = 'border:1px solid green; width:400px; z-index:100; height:100px;'; 
        var childDiv= document.createElement('div'); 
        childDiv.id="childDiv"; 
        childDiv.style.cssText = 'border:2px solid gray; width:200px; z-index:100; height:50px;'; 
        div.appendChild(childDiv); 
        document.body.appendChild(div); 
      }, 
      createSelect:function(){ 
        var select=document.createElement('select'); 
        select.id="select"; 
        var option1=document.createElement('option'); 
        option1.value=1; 
        option1.text=1;//非ie,添加内容 
        option1.innerHTML=1;//ie,添加内容 
        select.appendChild(option1); 
        var option2=document.createElement('option'); 
        option2.value=2; 
        option2.text=2; 
        option2.innerHTML=2; 
        select.appendChild(option2); 
        var option3=document.createElement('option'); 
        option3.value=3; 
        option3.text=1; 
        option3.innerHTML=3; 
        select.appendChild(option3); 
        document.body.appendChild(select); 
      }, 
      createRadio:function(){ 
        var radio=document.createElement('input'); 
        radio.id='radio'; 
        radio.type="radio"; 
        radio.width="100"; 
        var label=document.createElement('label'); 
        label.text="男"; 
        label.innerHTML="男"; 
        document.body.appendChild(radio); 
        document.body.appendChild(label); 
      } 
    }; 
    Test.createDiv();//创建div 
    Test.appendDivChild();//为追加子div 
    Test.createSelect();//创建下拉框 
    Test.createRadio();//创建单选按钮 
  </script> 
  <select> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
  </select> 
  </body> 
</html> 

您可能感兴趣的文章:

  • jQuery实现动态添加和删除一个div
  • javascript与jquery动态创建html元素示例
  • jquery动态添加删除div
    具体实现
  • jquery创建div 实现代码
  • JQuery DIV
    动态隐藏和显示的方法

2.创建div的属性:

希望本文所述对大家学习javascript程序设计有所帮助。

Javascript代码

您可能感兴趣的文章:

  • JS动态创建元素的两种方法
  • JS中动态创建元素的三种方法总结(推荐)
  • JS动态创建DOM元素的方法
  • js 动态创建 html元素
  • js实现动态创建的元素绑定事件
  • javascript与jquery动态创建html元素示例
  • 浅析JS动态创建元素【两种方法】
  • JS中动态添加事件(绑定事件)的代码
  • javascript下给元素添加事件的方法与代码
  • javascript
    动态添加事件代码
  • js实现为a标签添加事件的方法(使用闭包循环)
  • JS实现为动态创建的元素添加事件操作示例

复制代码 代码如下:

<scripttypescripttype=”text/javascript”>
functioncreateElement(){
varcreateDiv=document.createElement(“div”);
createDiv.title=”thisisanewdiv.”;
createDiv.id=”newDivId”;
createDiv.class=”newDivClass”;
createDiv.innerHTML=”Testcreateadivelement!”;
document.body.appendChild(createDiv);
}
</script>

<scripttypescripttype=”text/javascript”>
functioncreateElement(){
varcreateDiv=document.createElement(“div”);
createDiv.title=”thisisanewdiv.”;
createDiv.id=”newDivId”;
createDiv.class=”newDivClass”;
createDiv.innerHTML=”Testcreateadivelement!”;
document.body.appendChild(createDiv);
<!–Directly use 2 CSS class styles–>
createDiv.className = “name file_col”;
}
</script>

3.创建div的样式:

Javascript代码

复制代码 代码如下:

<scripttypescripttype=”text/javascript”>

functioncreateElement(){
varcreateDiv=document.createElement(“div”);
createDiv.style.background=”pink”;
createDiv.style.border=”1pxsolidred”;
createDiv.style.width=”50px”;
createDiv.style.height=”50px”;
createDiv.innerHTML=”Testcreateadivelement!”;
document.body.appendChild(createDiv);
}
</script>

Javascript代码 复制代码 代码如下:
scripttypescripttype=”text/javascript” functioncreateElement(){
varcreateDiv=document.createElement(“div”); createD…

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图