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>
  • 相关阅读:
    面向对象设计原则
    面向对象设计流程
    mysql远程连接命令(转)
    如何使用matplotlib绘制一个函数的图像
    svn:ignore eclipse开发一般忽略文件
    zookeeper client 常用操作
    pip使用
    vi常用快捷键
    python常用函数
    RabbitMQ 学习记录
  • 原文地址:https://www.cnblogs.com/azhqiang/p/4107738.html
Copyright © 2011-2022 走看看