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

jQuery创建节点

阅读更多
一 介绍
创建元素节点包括两个步骤,一是创建新元素,二是将新元素插入到文档中(即父元素中)。
二 应用
要在文档的body元素中创建一个新的段落节点可以使用下面的代码:
三 代码 
<script language="javascript" src="JS/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	//方法一
	var $p=$("<p></p>");
	$p.html("<span style='color:#FF0000'>方法一添加的内容</span>");
	$("body").append($p);
	//方法二
	var $txtP=$("<p><span style='color:#FF0000'>方法二添加的内容</span></p>");
	$("body").append($txtP);
	//方法三
	$("body").append("<p><span style='color:#FF0000'>方法三添加的内容</span></p>");
	//弹出新添加的段落节点p的文本内容
	alert($("p").text());
});
</script>
 
四 运行结果


 
 
五 运行说明
在创建节点时,浏览器会将所添加的内容视为HTML内容进行解释执行,无论是否是使用html()方法指定的HTML内容。上面所使用的3种方法都将在文档中添加一个颜色为红色的段落文本。
  • 大小: 8.1 KB
1
0
分享到:
评论

相关推荐

    jquery创建节点

    下面将详细介绍jQuery创建节点的相关知识点。 1. **文本节点的创建**: 使用`jQuery.text()`或`jQuery.html()`方法可以创建包含文本的元素。例如,如果你有一个空的`&lt;div&gt;`,你可以用`$('div').html('Hello, World...

    jQuery简单创建节点的方法

    本文实例讲述了jQuery简单创建节点的方法。分享给大家供大家参考,具体如下: &lt;html&gt; &lt;head&gt; &lt;meta http-equiv=Content-Type content=text/html; charset=utf-8 /&gt; &lt;title&gt;&lt;/title&gt; ...

    jquery包裹节点

    这将会为每个匹配的元素创建一个新的`&lt;div&gt;`,并将其作为这些元素的父节点。 **.wrapAll()** ```javascript $('selector').wrapAll('&lt;div class="container"&gt;&lt;/div&gt;'); ``` 这里,所有匹配的元素会被同一个`...

    jQuery步骤节点进度条代码

    例如,使用`.click()`方法绑定点击事件,`.animate()`方法创建平滑的动画效果,`.val()`方法改变`&lt;progress&gt;`元素的值,`.addClass()`和`.removeClass()`方法切换步骤节点的CSS类以改变其外观。 代码可能如下: ``...

    jQuery带节点步骤进度条插件.zip

    jQuery带节点步骤进度条插件是一款专为网页设计者打造的高效工具,它主要用于呈现具有节点的步骤进度样式。在创建交互式用户界面时,这种插件尤其有用,例如在线表单提交、购物车结账流程或者任何需要按顺序进行多...

    jQuery插入节点1

    在本文中,我们将详细介绍 jQuery 中的插入节点方法,包括创建节点、插入节点、删除节点、克隆节点、替换节点和包裹节点等。 创建节点 在 jQuery 中,可以使用工厂函数 `$()` 来创建节点。例如,`$("&lt;p&gt;")` 将创建...

    jQuery步骤节点进度条代码.zip

    - **HTML结构**:创建包含步骤节点的DOM结构,可能使用`&lt;ul&gt;`和`&lt;li&gt;`标签来定义列表。 - **CSS样式**:定义进度条和步骤节点的外观,包括颜色、宽度、边框等。 - **jQuery插件**:可能使用自定义的jQuery插件...

    jQuery与JavaScript节点创建方法的对比

    使用jQuery创建节点是相对较为简便的方法,因为jQuery提供了一套简洁的语法来操作DOM。jQuery是一个快速、小巧且功能丰富的JavaScript库,它封装了常见的操作,从而简化了对DOM的操作。例如,使用jQuery创建一个带有...

    jquery替换节点

    这个方法接受一个参数,可以是HTML字符串、DOM元素、jQuery对象,或者是创建新元素的函数。例如,如果我们有一个ID为"oldElement"的元素需要被新的HTML内容替换,我们可以这样做: ```javascript $("#oldElement")....

    jQuery 1.5 遍历xml节点属性

    总之,jQuery 1.5通过其强大的API简化了XML节点属性的遍历,使开发者能够更加专注于应用逻辑,而不是底层的DOM操作。通过结合"test.html"和"jquery-1.5.js",我们可以创建一个直观的实例来演示这一功能。

    JQ 创建节点

    本篇文章将深入探讨“JQ创建节点”的知识点,这在构建动态网页时非常关键。 首先,理解DOM(Document Object Model)是至关重要的。DOM是HTML或XML文档的结构化表示,允许程序和脚本动态更新、添加或删除页面元素。...

    jQuery与JavaScript节点创建方法的对比.docx

    var $h1 = $("创建节点' class='head'&gt;jQuery与 JavaScript 创建节点比较&lt;/h1&gt;"); $("div").append($h1); ``` 这里,`$("&lt;h1&gt;")` 用于创建 h1 元素,`attr()` 方法用于设置属性,最后通过 `append()` 将新创建的...

    JQuery创建DOM节点的方法

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

    jQuery DOM节点操作源码

    在"jQuery DOM节点操作源码"中,我们可以深入理解jQuery是如何优雅地处理DOM(Document Object Model)节点的。以下是关于jQuery DOM操作的一些关键知识点: 1. **选择器**:jQuery 的核心功能之一就是强大的选择器...

    jQuery入门2

    - 推荐使用第二种方法,即通过jQuery创建节点。 - **插入节点** - 插入节点时,需要明确A与B的关系,其中A代表父节点,B代表子节点。 - `A.append(B)`:将B节点插入到A节点内部的后面。 - `A.prepend(B)`:将B...

    jquery创建一个新的节点对象(自定义结构/内容)的好方法

    &lt;title&gt;jQuery创建节点对象示例 &lt;!--[if IE]&gt; &lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt; &lt;![endif]--&gt; article, aside, figure, footer, header, hgroup, menu, nav, ...

    jquery 进度 节点 样式

    本篇文章将详细探讨jQuery在处理进度节点和样式方面的方法和技巧,帮助开发者更好地理解和应用这一功能强大的库。 首先,我们要明白“进度”通常指的是在执行某些任务或操作时,展示其完成度的一种可视化表示。在...

    jQuery动态添加节点循环流程图表代码.zip

    本资源“jQuery动态添加节点循环流程图表代码”提供了利用jQuery实现动态添加节点并创建循环流程图表的方法。这样的功能在数据可视化、交互式用户界面以及流程展示等方面非常实用。 首先,我们要理解jQuery动态添加...

    Jquery节点插入、复制和替换方法

    ### Jquery节点插入、复制和替换方法 #### 一、插入 在JQuery中,提供了多种方式来插入新的DOM节点,这些方法可以帮助开发者更灵活地操作网页结构。 ##### 内部插入节点 内部插入指的是在目标元素内部进行新节点...

Global site tag (gtag.js) - Google Analytics