通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习

需求:使用js创建一个4*3的表格table.

onload = function(){
function c(tagName){
return document.createElement(tagName);
}
var table = c('table');
var tbody = c('tbody');
table.appendChild(tbody);
for(var i = 0;i<4;i++){
var tr = c('tr');
for(var j = 0;j<3;j++){
var td = c('td');
//在td中放置文本
var txt = document.createTextNode('');
td.appendChild(txt);
tr.appendChild(td);
td.width = 200;
td.height = 50;
}
tbody.appendChild(tr);
}
table.setAttribute('border','1');
document.body.appendChild(table);
};

JS Dom节点操作demo!的更多相关文章

  1. 04-老马jQuery教程-DOM节点操作及位置和大小

    1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签.创建标签后,动态的给他添加属性.例如代码: // 动 ...

  2. 深入理解DOM节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...

  3. (转载)html dom节点操作(获取/修改/添加或删除)

    DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下   HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素 ...

  4. 第一百六十七节,jQuery,DOM 节点操作,DOM 节点模型操作

    jQuery,DOM 节点操作,DOM 节点模型操作 学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面 ...

  5. 前端JavaScript之DOM节点操作

    1.HTML DOM是啥 Document Object Model:定义了访问和操作HTML文档的标准方法,把HTML文档呈现为带有元素,属性和文本的树状结构 2.解析过程 HTML加载完毕,渲染引 ...

  6. Dom节点操作总结

    Dom   一:Dom的概念 Dom的简介:  全称为 document object model  文档对象模型,是操作文档的一整套方法 - 文档 - html,document时一个对象,是dom ...

  7. 原生JS的DOM节点操作

    DOM(Document Object Model/文档对象模型)是针对HTML和XML文档的一个API.DOM节点树:在文档中出现的空格.回车.标签.注释.文本.doctype.标签等都属于DOM节 ...

  8. javasript 的DOM 节点操作:创建,插入,删除,复制以及查找节点

    DOM 含义: DOM 是文档对象模型(Document Object Model) 是一种基于浏览器编程的一套API 接口,我W3C 出台推荐的标准.其赋予了JS 操作节点的能力,当网页被加载时,浏 ...

  9. JavaScript DOM–节点操作

    节点 节点至少拥有nodeType(节点类型).nodeName(节点名称)和nodeValue(节点值)这三个基本属性. 元素节点 nodeType  为1 属性节点 nodeType  为2 文本 ...

随机推荐

  1. OpenFlow硬件交换机制作及刷机教程

    1.目的 将普通路由器升级成为一台支持OpenFlow的交换机. 具体哪些路由器可以刷OpenFlow可以参考:OpenWRT:http://wiki.openwrt.org/toh/start#su ...

  2. 二叉堆 C++实现

    #ifndef __BINARY_HEAP_H__ #define __BINARY_HEAP_H__ #include <iostream> #include <vector> ...

  3. UINavigationBar统一修改导航条样式

    #pragma mark -- 统一导航条样式 //统一导航条样式 UIFont *font = [UIFont systemFontOfSize:19.f]; NSDictionary *textA ...

  4. 2017年最新chrome必备插件推荐

    1. 上网必备 Speed dial plus新标签页, 直接替换掉chrome自带的毫无新意的新标签页,简洁优美快速,我本人非常喜欢. &amp;lt;img src="https ...

  5. 表格和echart二级联动,并通过点击echart高亮图标单元格

    html 部分 <!DOCTYPE html><html><head lang="en"> <meta charset="UTF ...

  6. 九度oj1163题

    题目描述: 输入一个整数n(2<=n<=10000),要求输出所有从1到这个整数之间(不包括1和这个整数)个位为1的素数,如果没有则输出-1. 输入: 输入有多组数据. 每组一行,输入n. ...

  7. mysql 修改数据库data存放位置

    一.首先把mysql的服务先停掉. 二.更改MySQL配置文件My.ini中的数据库存储主路径 打开MySQL默认的安装文件夹C:\Program Files\MySQL\MySQL Server 5 ...

  8. Canvas的下雪效果

    cfs.snow.js canvas 下雪场景 不会影响页面使用 使用方式非常简单 利用这个js文件,我们就能很快的让页面出现下雪的动画效果. 例如 <script type="tex ...

  9. 关于js中两种定时器的设置及清除(转载)

    1.JS中的定时器有两种: window.setTimeout([function],[interval]) 设置一个定时器,并且设定了一个等待的时间[interval],当到达时间后,执行对应的方法 ...

  10. 纯Jquery前端分页

    ---恢复内容开始--- 由于之前自己做过jquery分页,就是调用jni接口时,只能用前台分页解决显示问题.最近看到有人提这样的问题:一个请求传过来上万个数据怎么办?于是萌生了写这篇博客的想法. 效 ...