`
cakin24
  • 浏览: 1374653 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

创建DOM新节点

阅读更多
一 介绍
创建新的节点先通过使用文档对象中的createElement()方法和createTextNode()方法,生成一个新元素并生成文本节点,然后通过使用appendChild()方法将创建的新节点添加到当前节点的末尾处。
appendChild()方法将新的子节点添加到当前节点的末尾。
obj.appendChild(newChild)
newChild:表示新的子节点。
 
二 应用
创建新的节点,本示例在页面加载后自动显示“创建新节点”文本内容,并通过使用<b>标记将该文本加粗。
 
三 代码
<body onload="createChild()" >
<script language="javascript">
 <!--
 function createChild()
 {
	 var b=document.createElement("b");
	 var txt=document.createTextNode("创建新节点!");
	 b.appendChild(txt);
	 document.body.appendChild(b);
 }
 -->
</script>
</body>
 
 
四 运行结果
创建新节点!
1
0
分享到:
评论

相关推荐

    第06章 DOM节点操作(上)

    3. **创建和插入节点**:可以使用`document.createElement`创建新的元素节点,然后通过`appendChild`、`insertBefore`等方法将其插入到文档中。 4. **删除节点**:`removeChild`方法用于删除指定的子节点。 5. **...

    基本DOM节点操作

    1、获取元素节点 getElementById():获取指定唯一id的元素。 getElementByTagName():获取指定元素标签名的元素数组。 getElementByName():获取具有指定属性name的元素数组。 2、子节点 element.childNodes:返回该...

    Vue Render函数创建DOM节点代码实例

    在Vue中,`render` 函数接收一个参数 `createElement`,这个函数是用于创建虚拟DOM节点的。在上述代码实例中,我们可以看到如何使用 `createElement` 创建DOM元素: 1. **属性传递**:`createElement` 接受一个标签...

    JQuery创建DOM节点的方法

    本文实例讲述了JQuery创建DOM节点的方法。分享给大家供大家参考。具体分析如下: 用JQuery选择器能够快捷而轻松地查找到文档中的某个特定的元素节点,然后可以用attr()方法来获取元素的各种属性的值。但真正的DOM...

    JQ 创建节点

    - 当大量创建和操作节点时,应避免直接操作DOM,而是在内存中构建节点树,最后一次性插入。这可以显著提高性能。 在实际应用中,我们常常会遇到需要动态生成内容的情况,比如在AJAX请求后加载新的数据。这时,JQ的...

    第06章 DOM节点操作(下)

    DOM节点操作是前端开发中的核心技能,对创建交互式网页至关重要。 一、节点类型 DOM中的每个元素都是一个节点,包括元素节点、属性节点、文本节点等。元素节点(如`&lt;div&gt;`、`&lt;p&gt;`)是文档结构的主要构成部分,属性...

    DOM访问/创建/删除/修改文档节点及属性方法

    DOM 访问、创建、删除、修改文档节点及属性方法 DOM(Document Object Model)是 HTML 和 XML 文档的编程接口,允许开发者使用脚本语言(如 JavaScript)来访问和操作文档的结构和内容。在这里,我们将详细介绍 DOM...

    JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例

    知识点2:创建DOM节点 在JavaScript中,可以通过`document.createElement()`方法创建一个新的元素节点,这将返回一个代表新元素的DOM对象。例如,`var obj = document.createElement("p");`将会创建一个新的`&lt;p&gt;`...

    利用vue.js插入dom节点的方法

    接着,Vue提供了 `$appendTo`、`$before` 和 `$after` 这些方法,它们分别用于在现有元素后面添加、在现有元素前面插入和在现有元素后面插入新的DOM节点。例如: ```javascript new myAppendTo().$mount().$...

    domtoimage使用HTML5canvas从DOM节点生成图像

    "domtoimage使用HTML5canvas从DOM节点生成图像" 这个标题提到了一个名为 "domtoimage" 的工具,它利用HTML5的Canvas API将DOM(文档对象模型)中的节点转换为图像。这个过程通常用于网页截图或者在网页中保存和分享...

    DOM对象中的节点操作.pdf

    文档对象模型(DOM)将Web页面与脚本语言或编程语言连接起来,为Web页面的结构化表示提供了一种方式。...通过深入学习和实践DOM节点操作,开发者可以有效地控制Web文档,实现更加丰富和动态的Web应用。

    dom4j 解析(读取) xml 节点数据

    在本教程中,我们将深入探讨如何使用DOM4J解析(读取)XML节点数据,不受XML层级的限制。 首先,确保你已经下载了必要的依赖,即DOM4J库。通常,这将是一个名为`dom4j-x.x.x.jar`的文件,其中x.x.x是DOM4J的版本号...

    javascript转换字符串为dom对象(字符串动态创建dom).docx

    这个函数接收一个字符串参数 `arg`,然后创建一个 `div` 元素,并将字符串插入到该元素中,然后返回该元素的子节点。这样,我们就完成了一个字符串到标准 DOM 的转换。 使用这个函数,我们可以轻松地将字符串转换为...

    DOM和BOM的使用

    节点迭代器是指 DOM 中的节点迭代器,它允许开发者遍历 DOM 树中的节点。节点迭代器提供了许多方法和属性,开发者可以通过这些方法和属性来操作文档的内容和结构。 查找 查找是指通过 JavaScript 查找 DOM 中的...

    【Web API DOM11】节点操作

    3. **创建节点**:使用`document.createElement()`方法创建新的元素节点,`document.createTextNode()`用于创建文本节点。新创建的节点可以使用`appendChild()`、`insertBefore()`或`replaceChild()`方法插入到文档...

    javascript将DOM节点添加到文档的方法实例分析.docx

    总结来说,JavaScript将DOM节点添加到文档的方法有两种,一种是先创建所有节点再添加,另一种是先添加空容器再逐个添加节点。实际应用中,当处理大量节点时,应优先考虑第二种方法,以提高页面的加载速度和性能。...

    DOM节点中元素节点与文本节点操作方法.pdf

    DOM提供了一系列方法来操作这些节点,如`createElement`和`appendChild`用于创建和添加新元素,`replaceChild`用于替换节点,`firstElementChild`和`lastElementChild`用于访问元素子节点,以及`nextElementSibling`...

    js dom操作节点仿视频网站文字幕动画代码

    3. **添加节点**: 要将新创建的节点添加到文档中,可以使用`appendChild`或`insertBefore`等方法。例如,`document.getElementById('subtitles').appendChild(subtitle)`会将`subtitle`元素添加到ID为'subtitles'的...

    JavaScript HTML DOM元素 节点操作汇总

    总之,JavaScript的DOM节点操作提供了强大的能力,使我们能够动态地更新页面内容,实现丰富的用户交互。通过熟练掌握这些基本操作,开发者可以轻松地创建动态、响应式的Web应用。在实际开发中,结合事件监听、CSS...

Global site tag (gtag.js) - Google Analytics