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); 
    </script>

    转载自:http://wangyj0898.blog.51cto.com/1519857/343660/

  • 相关阅读:
    Mondriaan's Dream POJ
    H
    Superdoku Kattis
    Corn Fields POJ
    旅行的意义 Gym
    G
    J
    Welcome Party ZOJ
    redis入门到精通系列(三):key的通用操作和redis内部db的通用操作
    redis入门到精通系列(二):redis操作的两个实践案例
  • 原文地址:https://www.cnblogs.com/programsky/p/4609661.html
Copyright © 2011-2022 走看看