通过黑马课程的学习,在这里分享一个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. 好多鱼 Java

    牛客网的题目: 链接:https://www.nowcoder.com/questionTerminal/e3dd485dd23a42899228305658457927牛牛有一个鱼缸.鱼缸里面已经有 ...

  2. Microsoft Visual Studio 2017 安装过程

    工欲善其事必先利其器 Visual Studio 2017 正式版官方下载地址:https://www.visualstudio.com/downloads/ 安装vs2017的时候最好关闭已打开的v ...

  3. git remote log error

    使用git pull的时候收到以下信息: error: there are still refs under 'refs/remotes/origin/xxxx'From 10.1.25.57:yyy ...

  4. 记录Winform开发过程中遇到的情况

    前两天开发了个Winform操作Excel和数据库的一个小程序,把Winform的一些东西又给捡了起来,当中又学到了一些新的东西,特来写出来留作纪念. 一.CSKIN美化框架的使用 刚开始做的时候,发 ...

  5. 第一篇Active Directory疑难解答概述(1)

    后期预告:从接下来我会给大家讲解,Active Directory 活动目录重要性,以及在日常管理运维中如和去排查问你题.俗话说,一个不健康的Active Directory环境是不健康的Exchan ...

  6. ATM取款~~

    package com.jredu.ch03; import java.util.Scanner; public class Atmmmmmmmmmm { static int totalMoney= ...

  7. HTML5本地图片裁剪并上传

    最近做了一个项目,这个项目中需要实现的一个功能是:用户自定义头像(用户在本地选择一张图片,在本地将图片裁剪成满足系统要求尺寸的大小).这个功能的需求是:头像最初剪切为一个正方形.如果选择的图片小于规定 ...

  8. 多线程爬坑之路-J.U.C.atomic包下的AtomicInteger,AtomicLong等类的源码解析

    Atomic原子类:为基本类型的封装类Boolean,Integer,Long,对象引用等提供原子操作. 一.Atomic包下的所有类如下表: 类摘要 AtomicBoolean 可以用原子方式更新的 ...

  9. elasticsearch 索引 red 状态恢复 green

    方案一 找到状态为 red 的索引 curl -X GET "http://172.xxx.xxx.174:9288/_cat/indices?v=" red open index ...

  10. Activity猫的一生-故事讲解Activity生命周期

    大家好,关于Android中Activity的生命周期,网上大多数文章基本都是直接贴图.翻译API,比较笼统含糊不清. 我就用故事来说一说: 有个人叫User,TA养了几只猫,有只猫叫Activity ...