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

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

效果图：

为了节省时间，就直接贴代码了！

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

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

赞 (0)

相关推荐

  • JavaScript实现DIV层拖动及动态增加新层的方法

    本文实例讲述了JavaScript实现DIV层拖动及动态增加新层的方法.分享给大家供大家参考.具体分析如下: 无刷新添加一个新的DIV层,并可实现的该层的拖动,鼠标拖动层可移动位置,将JS部分另存为一个新文件,用到的时候从外部引入,这个拖动层代码很流行,GG和YAHOO等大网站经常可以看到这种效果. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=

  • Javascript动态创建div的方法

    本文实例讲述了Javascript动态创建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/xht

  • JS把内容动态插入到DIV的实现方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="content-

  • js动态创建及移除div的方法

    本文实例讲述了js动态创建及移除div的方法.分享给大家供大家参考.具体实现方法如下: //创建div function createDiv(){ if(document.getElementByIdx_x("newD")!=null) document.body.removeChild(document.getElementByIdx_x("newD")); var Div = document.create_rElement("div");/

  • JavaScript动态改变div属性的实现方法

    本文实例讲述了JavaScript动态改变div属性的实现方法.分享给大家供大家参考.具体如下: 这里可以通过JS动态改变div属性,样式等 <script type="text/javascript"> var oBox = document.getElementById('box'); var oDiv = document.getElementById('div1'); var aInput = document.getElementsByTagName('input

  • Javascript控制div属性动态变化实例分析

    Javascript控制div属性动态变化实例分析

    本文实例分析了Javascript控制div属性动态变化的方法.分享给大家供大家参考.具体如下: 这里使用JS控制div属性变化,另Div的几何尺寸发生变化,例如变宽.变高.改变颜色.隐藏Div.重置所有属性为默认值等.虽然在本例中,这些属性值的改变很简单就可实现,但在JavaScript网页前端设计中,这种属性或方法经常会被用到,因此还是值得大家关注的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-cha-div-opt-demo/

  • JavaScript动态设置div的样式的方法

    有时候需要根据需要动态设置div的样式,当然对于稍有经验的javascript开发者来说,这一切都是那么的简单,但是对于初学者或者说没有相关经验的开发者来说可能就是一个不大不小的难关,下面就通过实例简单介绍一下如何实现此效果. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content=&quo

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

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

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

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

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

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

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

  • 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动态创建表格及添加数据实例详解

    本文实例讲述了javascript动态创建表格及添加数据的方法.分享给大家供大家参考.具体分析如下: 1. 动态创建表格(代码不兼容IE6) <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>动态

  • Javascript动态创建表格及删除行列的方法

    本文实例讲述了Javascript动态创建表格及删除行列的方法.分享给大家供大家参考.具体实现方法如下: <!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"

  • javascript动态创建链接的方法

    本文实例讲述了javascript动态创建链接的方法.分享给大家供大家参考.具体分析如下: 动态创建链接示例: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>动态添加链接</title&

  • javascript实现数字配对游戏的实例讲解

    javascript实现数字配对游戏的实例讲解

    游戏效果如下图所示: 规则: 在4X5的格子中,有随机的互不相等的10个数,每个数据有两份(也就是20个数,有两两相等的十对),随机分布在20个格子中.游戏开始,弹出二十个数的序列.每次点击格子会显示当前格子中的数据并暂时保留显示,直到下一次点击,如果下一次点击显示的数据与保留的数据不同,则之前点击保留的数据会消失(仍然存在于该格子但不显示).如果连续点击显示的两个数据一样,则两个数据都会显示并且不会再消失. 直到所有数据都通过连续点击相同数据的方式显示出来,就算游戏结束,报出游戏用时.此时可以

  • vuejs 动态添加input框的实例讲解

    实例如下: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <c:set var="front" val

随机推荐