`
robinqu
  • 浏览: 90283 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

Javascript 创建文档元素

阅读更多
以下代码来自 https://developer.mozilla.org/cn/%E4%BD%BF%E7%94%A8Javascript%E5%92%8CDOM_Interfaces%E6%9D%A5%E5%A4%84%E7%90%86HTML#page-tags

var mybody=document.getElementsByTagName("body").item(0);
       mytable = document.createElement("TABLE");
       mytablebody = document.createElement("TBODY");
       for(j=0;j<2;j++) {
           mycurrent_row=document.createElement("TR");
           for(i=0;i<2;i++) {
               mycurrent_cell=document.createElement("TD");
               currenttext=document.createTextNode("cell is:"+i+j);
               mycurrent_cell.appendChild(currenttext);
               mycurrent_row.appendChild(mycurrent_cell);
               // 当column为0时,设置单元格背景色;column为1时隐藏单元格
               if(i==0) {
                   mycurrent_cell.style.background="rgb(255,0,0)";
               } else {
                   mycurrent_cell.style.display="none";
               }
           }
           mytablebody.appendChild(mycurrent_row);
       }
       mytable.appendChild(mytablebody);
       mybody.appendChild(mytable);


createElement()创建元素节点
createTextNode()创建文字节点
appendChild()添加节点到某个元素
setAttribute()设置节点的属性
insertBefore()在前端插入
你从上到下的创建元素;然后你从下向上的将子元素接在他们的父元素上

removeChild() 移除节点
分享到:
评论

相关推荐

    头歌教学实践平台 Web前端开发基础 JavaScript学习手册十四:HTML DOM-文档元素的操作(二)

    这篇教程——"JavaScript学习手册十四:HTML DOM-文档元素的操作(二)"深入探讨了如何使用JavaScript来操纵HTML文档中的元素,进一步提升网页动态性和交互性。 DOM是HTML和XML文档的一种结构化表示,它将网页内容...

    javaScript 中文开发文档

    此“JavaScript 中文开发文档”是针对JavaScript编程的一份详细资源,旨在帮助开发者深入理解和掌握这门语言。 这份文档可能包含以下几个核心部分: 1. **基础语法**:JavaScript的基础包括变量、数据类型(如字符...

    ARCGIS API for JavaScript 开发文档 完整版

    首先,文档会介绍API的基础概念,包括如何获取和引用API库,以及如何设置地图的基本元素,如地图容器、基图层和初始视图。开发者需要理解`Map`对象和`MapView`对象的区别,前者表示地图本身,后者则表示地图的视图,...

    JavaScript中文帮助文档

    5. **DOM操作**:讲解如何使用JavaScript操作HTML元素,包括选择元素(querySelector、querySelectorAll)、修改元素属性、添加或删除元素,以及事件处理。 6. **AJAX和Fetch API**:介绍异步编程,包括...

    css帮助文档+html帮助文档+javascript帮助文档+javascript特效代码

    这个压缩包包含了这三个关键领域的帮助文档和JavaScript特效代码,为开发者提供了丰富的参考资料。 首先,让我们深入了解一下CSS。CSS是一种样式表语言,用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档...

    JavaScript的API文档

    学习这些API文档,开发者可以掌握JavaScript的基础语法,了解如何创建和使用函数、对象,以及如何利用DOM进行页面操作。更重要的是,通过阅读和实践书中的示例,可以提高实际编程能力,理解JavaScript在网页动态化中...

    javascript文档操作

    Document对象是JavaScript开发中不可或缺的一部分,它提供了强大的能力来操作HTML文档中的各个元素。掌握Document对象及其相关属性和方法,对于构建动态网页应用至关重要。同时需要注意,不同的浏览器和浏览器版本...

    html,javascript元素属性文档

    另外,JavaScript还有一套强大的对象模型,如DOM(文档对象模型),它允许我们以编程方式操纵HTML文档。 DOM2-Style是DOM的一个扩展,专门处理CSS样式。通过DOM,我们可以动态改变元素的样式属性,实现动态效果。...

    javascript开发文档

    JavaScript开发文档是一个全面的资源集合,旨在为Web开发者提供关于创建交互式网页所需的各种技术的指导和支持。这个压缩包包含了四个关键部分,分别是"网页制作完全手册.chm"、"JS使用手册.chm"、"样式表.chm"以及...

    javascript帮助文档

    例如,DOM(Document Object Model)是HTML和XML文档的结构化表示,JavaScript通过DOM可以访问和修改页面上的任何元素。`document.getElementById()`、`document.querySelector()`和`document.querySelectorAll()`等...

    javascript 中文帮助文档

    这份"JavaScript中文帮助文档"是开发者和学习者的重要参考资料,它涵盖了JavaScript的核心概念、语法、函数以及API的详细解释。 在JavaScript中,基本的数据类型包括字符串、数字、布尔值、null、undefined、对象和...

    Javascript技术文档

    JavaScript,一种广泛应用于Web开发的脚本语言,是创建交互式网页和动态应用程序的核心工具。在本"JavaScript技术文档"中,我们将会深入探讨这个语言的各个方面,包括它如何推动Web开发进入新纪元,面向对象编程的...

    javascript 文档

    DOM是HTML和XML文档的结构化表示,JavaScript可以通过DOM API来查找、修改、添加或删除HTML元素。例如,可以使用`document.getElementById()`找到特定ID的元素,然后通过改变其`innerHTML`属性来更新元素内容。 ...

    javascript中文文档

    7. **DOM操作**:解释如何通过JavaScript来查找、修改和操作HTML元素,如getElementById、querySelector、innerHTML等。 8. **AJAX与Fetch API**:介绍如何进行异步数据请求,理解XMLHttpRequest对象和更现代的...

    javascript API文档

    DOM是HTML和XML文档的结构化表示,JavaScript通过DOM API可以操作网页的元素,如添加、删除、修改元素,或者获取元素属性。例如,`document.getElementById()`用于获取具有特定ID的元素,`element.innerHTML`用于...

    JavaScript学习文档

    Document Object Model(DOM)是HTML和XML文档的结构表示,JavaScript可通过DOM API来操作页面元素,如创建、查找、修改和删除元素。熟悉getElementById、querySelector、innerHTML等方法,能够实现对网页内容的动态...

    javascript学习文档

    2. DOM操作:熟悉DOM元素的选择(getElementById、getElementsByClassName、querySelector等)、创建、修改和删除,以及事件委托。 六、ES6及新特性 1. 类与模块:了解ES6引入的类语法,以及模块导入导出(import/...

Global site tag (gtag.js) - Google Analytics