`
cleaneyes
  • 浏览: 343456 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Javascript中动态生成新节点

阅读更多

Javascript中动态生成新节点

在DOM中生成新的节点,需要以下过程:
创建一个新元素(以段落标记为例)
  var newElement = document.createElement("P");
  此时生成的元素只存在于浏览器内存中,还不是文档包含层次的一部分。
如果需要为元素设置属性,可以使用setAttribute()方法
  newElement.setAttribute("id","newP");
  或 newElement.id = "newP";
如果要在段落中加入文本,可以先生成一个文本节点作为对象
  var newText = document.createTextNode("Something write here");
而后把文本对象放入元素中
  newElement.appendChild(newText);
最后一步,也是最重要的一步,一定要把生成的新元素作为body元素的子节点插入(其它元素插入到相应的父节点之下)
  document.body.appendChild(newElement);
这样,新元素才是文档包含层次的一部分,可以像引用文档中其它元素一样引用。

分享到:
评论

相关推荐

    jsp+dtree+taglib 动态生成树节点

    在IT行业中,动态生成树节点是一项常见的需求,特别是在构建数据可视化、权限管理或者导航菜单等场景下。本项目结合了JSP(JavaServer Pages)、dTree(一个JavaScript实现的树形菜单库)以及Taglib(自定义标签库)...

    Dtree+Jquery动态生成树节点

    在"Dtree Jquery动态生成树节点"这个主题中,我们可以探讨以下几个关键知识点: 1. **DTree的初始化**:在HTML中添加一个空的div元素作为DTree的容器,然后在JavaScript中使用JQuery选择该元素,并调用DTree的初始...

    Dtree+Jquery动态生成树节点.

    在IT行业中,动态生成树节点是一项常见的需求,特别是在前端开发中。标题提到的"Dtree+Jquery动态生成树节点"是指使用DTree插件结合jQuery库来创建可交互的、动态更新的树形结构数据展示。这篇博文链接指向的是张荣...

    动态加载有子节点的树

    在给定的博客链接中,可能详细介绍了如何在特定环境中实现这样的动态加载有子节点的树结构,包括使用某种编程语言(可能是Java、JavaScript、Python等)、特定库或框架(如React、Angular、Vue等)的示例代码和最佳...

    树形结构生成javaScript

    3. **添加子节点**:通过向父节点的`children`数组中添加新节点来实现。 ```javascript var parent = new TreeNode('parent'); var child = new TreeNode('child'); parent.children.push(child); ``` 4. **...

    simplehtmltree3.5根据xml生成整棵树,Ajax方式动态加载节点

    `simplehtmltree3.5`是一个强大的JavaScript库,它允许开发者根据XML数据动态生成交互式的树状视图,并支持Ajax方式来实现节点的异步加载,极大地提升了用户体验。本文将深入探讨这个库的核心功能和应用场景。 首先...

    JavaScript读取XML节点生成多级菜单

    在JavaScript编程中,生成多级菜单通常用于网站的导航栏,这样可以清晰地展示复杂的层级结构,方便用户浏览。XML(可扩展标记语言)是一种常用的数据交换格式,它允许我们结构化地存储数据,包括菜单的层级关系。在...

    Java爬虫Jsoup+httpclient获取动态生成的数据

    本文主要讲述如何利用Java编程语言中的Jsoup库和HttpClient工具包来获取和解析动态生成的数据,特别是那些通过JavaScript动态加载的数据。 ### Java爬虫基础 Java爬虫是指使用Java语言编写的一类程序,这些程序...

    JavaScript动态生成控件赋事件

    在网页中,我们经常需要动态生成控件并为其赋予事件,这在JavaScript中是一项基本但至关重要的技能。这篇博客文章可能详细阐述了如何通过JavaScript实现这一功能。 动态生成控件通常涉及到DOM(Document Object ...

    浅谈JavaScript语言中文档节点访问技术.pdf

    在本文中,我们将探讨JavaScript语言中文档节点访问技术的相关知识点。节点访问是JavaScript语言中的一种基本技术,用于访问和操作HTML文档中的元素。下面是节点访问技术的详细介绍。 一、节点访问的概念 在HTML文...

    js自动校验之动态生成错误提示信息节点(复习下如何操作dom节点)

    在动态生成错误信息时,我们可能需要先创建一个`<p>`或`<span>`元素作为错误提示的容器,然后将错误信息作为文本节点添加到这个新创建的元素中。 接下来,定位到要插入错误提示的位置是关键。这通常通过获取特定...

    动态生成组织结构树型图

    在IT行业中,动态生成组织结构树型图是一种常见的需求,特别是在企业管理系统或者人力资源软件中。这个功能能够清晰地展示公司的员工结构,便于管理和查找。在这个场景下,我们主要使用JavaScript来实现这一功能,...

    ext生成树节点带链接

    在上面的例子中,我们为子节点`child`添加了一个`href`属性,指定了链接的URL,并设置了`hrefTarget`属性,使其在新窗口打开。同时,还定义了一个点击事件监听器,当用户点击该节点时,将打开指定的链接。 #### 5. ...

    动态生成菜单树

    在IT行业中,动态生成菜单树是一项常见的需求,尤其是在开发Web应用程序时。这通常涉及到前端界面与后端数据的交互,以及数据结构的处理。这里,我们主要探讨的是如何使用JSP(JavaServer Pages)来实现这个功能,...

    JS+HTML动态生成的树

    2. **JavaScript操作**:为了使树结构动态化,我们需要使用JavaScript来处理展开/折叠节点、添加/删除节点、遍历树等操作。这通常涉及DOM(文档对象模型)操作,比如`document.getElementById`、`appendChild`、`...

    JQuery实例动态生成树

    在jQuery中动态生成树,通常会经历以下步骤: 1. **HTML结构准备**:首先,创建一个基本的HTML结构,例如一个空的`<ul>`元素,用于存放树的根节点。这个`<ul>`元素可以通过jQuery选择器获取,如`$("#treeContainer...

    Joint.js动态生成流程图

    3. **动态生成**:理解如何在JavaScript中根据数据变化动态更新图形,这可能涉及到监听数据变化事件并相应地更新流程图。 4. **图形设计与布局**:了解如何定义流程图中的节点(如矩形、菱形等)和连接线,以及它们...

    【JavaScript源代码】vue 动态生成拓扑图的示例.docx

    在Vue.js应用中动态生成拓扑图是一种常见的需求,特别是在数据可视化、系统监控等领域。本示例介绍如何在Vue项目中实现横向拓扑图的创建,主要依赖于 Tencent 的 bkTopology 库。以下是对实现这一功能的关键步骤和...

Global site tag (gtag.js) - Google Analytics