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>
     
  • 相关阅读:
    代码审查如何做
    使用 Gitbook 打造你的电子书
    Ztree的简单使用和后台交互的写法(一)
    ORACLE 错误:oralce record is locked by another user
    easyUI增加视图分组的办法
    jquery 解析数据库中的json日期为正常的格式
    Bootstrap基本类和组件学习二
    bootstrap的学习-基础样式和排版一
    easyUI中tree的简单使用
    orancle的安装和配置
  • 原文地址:https://www.cnblogs.com/catherineSue/p/5156223.html
Copyright © 2011-2022 走看看