zoukankan      html  css  js  c++  java
  • 在js中使用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.ffasp.com/","网页教学网"); 
    </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("网页教学网:http://www.ffasp.com/");    
    </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); 
    5.创建select
    jquery 的话这样
    <select id="selectid">
    </select>

    $(function(){
    $("#selectid").click(function(){
    $("#selectid").append("<option value='"+entity+"'>"+entity+"</option>");//entity 变量
    });

    });

    js的话
    function padd(){
    var objOption = document.createElement("OPTION");
    objOption.text= 2;
    objOption.value=2;
    document.getElementById("padd").options.add(objOption);
    }

    </script>
  • 相关阅读:
    Ubuntu 14.04 配置FTP
    python 命名规范
    Windows 多用户远程访问 Ubuntu 14.04桌面
    ubuntu 安装Matlab 解决显示中文乱码
    形式参数、实际参数和值传递、引用传递
    关于Hibernate中的临时态, 持久态, 游离态
    HTTP错误
    SpringMVC注解
    java变量的命名使用规则
    字节流与字符流的区别详解
  • 原文地址:https://www.cnblogs.com/azhqiang/p/4107738.html
Copyright © 2011-2022 走看看