`
cakin24
  • 浏览: 1330683 次
  • 性别: 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 创建节点 节点jquery 创建节点 节点

    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创建DOM节点的方法

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

    14jQueryDOM节点操作.docx

    开发工具与关键技术:Visual Studio jQueryDOM节点操作相关知识点 创建DOM节点

    jQuery动态创建元素以及追加节点的实现方法

    下面小编就为大家带来一篇jQuery动态创建元素以及追加节点的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    尚硅谷jQuery视频教程(25集)

    教程名称:尚硅谷jQuery视频教程(25集)课程目录:【】1.尚硅谷_佟刚_jQuery_HelloWorld【】10....尚硅谷_佟刚_jQuery_创建节点及插入节点【】14.尚硅谷_ 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。

    Jquery 动态循环输出表格具体方法

    如果是PHP的话就简单多了,Jquery实现还是第一个,就开始狂的实验,最后还是实现了(知识点:Jquery创建节点、获取表单的值、循环语句)Jquery代码: 代码如下: [removed]$(function(){$(“#btn”).click(function...

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

    一、 创建节点: 节点是DOM结构的基础,根据DOM规范,节点是一个...var $h1 = $("&lt;h1 title='\u521b\u5efa\u8282\u70b9' class='head'&gt;jQuery与JavaScript创建节点比较&lt;/h1&gt;"); $("div").append($h1); //JavaScript方

    jquerydemo

    13. 创建和插入节点 14. 重写 JS 实验之分类添加内容 15. 删除及清空节点 16. 重写 JS 实验之员工管理 17. 克隆和替换节点 18. 包裹节点 19. html() 方法 & val() 方法 20. 小结2 21. CSS DOM 操作 22. 事件处理 23....

    最全面的jQuery基础知识

    jQuery元素属性、jQuery元素内容、jQuery动态创建内容、jQuery删除节点、jQuery事件处理、jQuery文档就绪的四种写法、jQuery事件绑定和解除绑定、jQuery事件切换、jQuery实现toggle功能、jQuery插件、jQuery插件实用...

    JQuery权威指南源代码

    动态创建节点元素 动态插入节点方法 动态插入节点方法 复制元素节点 替换元素节点 包裹元素节点 遍历元素 删除元素 数据管理 第4章 事件中的冒泡现象 bind方法绑定事件 映射方式绑定不同的事件 切换事件...

    jQuery中对节点进行操作的相关介绍

    jQuery中使用$(html字符串)来动态创建Dom节点,并且返回一个jQuery对象,可以调用append等方法将创建的节点添加到Dom中。 例如:  var link = $(“百度”);  $(“div:first”).append(link); 添加节点元素的方法:...

    jQuery权威指南-源代码

    3.3 创建节点元素/58 3.4 插入节点/60 3.4.1 内部插入节点方法/60 3.4.2 外部插入节点方法/64 3.5 复制节点/66 3.6 替换节点/68 3.7 包裹节点/69 3.8 遍历元素/71 3.9 删除元素/73 3.10 综合案例分析—...

    JQuery学习笔记二(节点操作,事件监听,动画相关方法)

    3. 创建节点 4. appendTo() 5. prepend() 6. prependTo() 7. after() 8. before() 9. insertBefore() 10. wrap() 11. wrapAll() 12. replaceWith() 13. empty() 14. remove() 二. 事件监听 1. 通过事件名绑定事件 2...

    jquery插件使用方法大全

    jQuery.sub() jQuery 1.5提供了一种创建和修改jQuery副本的方式。可以用来添加不向外部公开的方法,或者对jQuery的某些方法进行重新定义以提供新功能,或者提供更好的封装、避免名称空间冲突。当然,也可以用来开发...

    JQuery插入DOM节点的方法

    将新创建的节点插入某个文档的方法并非只有一种,在JQuery中还提供了其他儿种插入节点的方法,如下表所示。读者可以根据实际需求灵活地做出多种选择。 HTML DOM结构如下: 欢迎访问软件开发网&gt;欢迎访问软件开发网 &...

    jQuery创建DOM元素实例解析

    本文实例讲述了jQuery创建DOM元素的使用技巧。分享给大家供大家参考。具体分析如下: 利用DOM方法创建元素节点,通常要将document.createElement()、document.createTextNode()、appendChild()配合使用,十分麻烦。 ...

    锋利的jQuery_高清_书签.part2

    3.2.2 创建节点 3.2.3 插入节点 3.2.4 删除节点 3.2.5 复制节点 3.2.6 替换节点 3.2.7 包裹节点 3.2.8 属性操作 3.2.9 样式操作 3.2.10 设置和获取HTML、文本和值 3.2.11 遍历节点 3.2.12 CSS—DOM操作 3.3 案例研究...

Global site tag (gtag.js) - Google Analytics