DOM——创建节点及节点属性与内部插入append()和appendTo()

创建节点及节点属性与内部插入append()和appendTo()

1 创建流程

创建节点（常见的元素、属性和文本）

添加节点的一些属性

加入到文档中

2 流程中涉及的方法

创建元素document,creat

设置属性setAttrilbute

添加文本innerHTML

加入文档appendChild

3 创建节点时注意：每一个元素节点都必须单独创建，节点是属性需要单独设置，而且设置的接口不是很统一，添加到指定的元素位置不灵活，浏览器兼容问题处理

4 创建元素节点常见的是直接把这个节点的结构通过HTML标记字符串描述出来，通过$()函数处理$("html结构")如$("<div><div>")

5 创建为本节点与创建元素节点类似，可以直接把文本内容一并描述，如$("<div>我是文本节点</div>")

6 创建为属性节点与创建元素节点同样的方式，如$("<div id=‘test‘ class=‘aaron‘>我是文本节点</div>")

7 append这个操作与对指定的元素执行原生的appendChild方法，将它们添加到文档中的情况类似

8 appendTo使用这个方法颠倒了常规的$(A).append(B)的操作，既不是把B追加到A中，而是把A追加到B中

9 append()和appendTo()的操作方法

append(content)向每个匹配的元素内部追加内容

appendTo(content)把所有匹配的元素追加到另一个指定的元素集合中

10 .append()和.appendTo()两种方法功能相同，主要的不同是语法、内容和目标的位置不同

11 .append()前面是被插入的对象，后面是要在对向内插入的元素内容

12 .appendTo()前面是要被插入的元素内容，而后面是被插入的对象

13 .append()和.appendTo()都是在被选元素的结尾（仍然在内部）插入指定内容

时间： 2024-10-10 00:03:07

DOM——创建节点及节点属性与内部插入append()和appendTo()的相关文章

DOM内部插入append()与appendTo()

DOM内部插入append()与appendTo() 动态创建的元素是不够的,它只是临时存放在内存中,最终我们需要放到页面文档并呈现出来.那么问题来了,怎么放到文档上? 这里就涉及到一个位置关系,常见的就是把这个新创建的元素,当作页面某一个元素的子元素放到其内部.针对这样的处理,jQuery就定义2个操作的方法

DOM创建和删除节点、HTML DOM常用对象[转]

创建和删除节点:——核心DOM 1. 创建单个元素节点:3步: 1. 创建空元素节点对象: var elem=document.createElement("标签名"); 比如: var a=document.createElement("a"); html: <a></a> 2. 设置新元素的关键属性: 比如: a.href="http://tm

DOM创建和删除节点

一.创建节点 3步 1.创建空元素对象: var newElem=document.createElement("标签名"); 例如:var a=document.createElement("a");//<a></a> 2.设置必要属性 newElem.属性名="值"; newElem.innerHTML="文本"; 例如:a.href="http://tmooc.cn";a.in

jQuery_DOM学习之------创建节点及节点属性

DOM创建节点及节点属性一.创建新的节点并添加到dom中 dom 节点创建的过程(创建节点<元素.属性.文本等>.添加节点的属性.加入到文档中) jQuery创建元素节点的方法: 创建元素节点: $("<div></div>"): 创建文本节点: $("<div>直接将文本的内容添加进去</div>"): 创建节点并给节点添加属性:var div = $("<div class='righ

1.DOM内部插入append()与appendTo() 动态创建的元素是不够的,它只是临时存放在内存中,最终我们需要放到页面文档并呈现出来.那么问题来了,怎么放到文档上? 这里就涉及到一个位置关系,常见的就是把这个新创建的元素,当作页面某一个元素的子元素放到其内部.针对这样的处理,jQuery就定义2个操作的方法. 选择器描述 append() 向每个匹配的元素内部追加内容或追加子节点 appendTo() 把所有匹配的元素追加到另一个指定的元素集合中 append:这个操作与对指定的元素执

jquery DOM 创建、插入、删除

1.创建元素节点: $("<div></div>") 2.创建文本节点,与创建元素节点类似,可以直接把文本内容一并描述 $("<div>我是文本节点</div>") 3.创建属性节点:与创建元素节点同样的方式 $("<div id='test' class='aaron'>我是文本节点</div>") $("<div class='right'><

DOM操作 ——如何添加、移除、移动、复制、创建和查找节点等。

DOM操作 --如何添加.移除.移动.复制.创建和查找节点等. (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点 (2)添加.移除.替换.插入 (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创

JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结

JS DOM节点: 在JS DOM中节点的关系被定义为节点的属性: 通常有以下几种节点之间的关系: (这里的关系是所有浏览器都支持的) parentNode 父节点 childNodes 子节点 firstChild 父节点里的第一个子节点 lastChild 父节点里的最后一个子节点 nextSibling 与子节点并列的下一个兄弟节点 previousSibling 与子节点并列的上一个兄弟节点火狐与谷歌支持而ie8不支持的节点关系有: previous

DOM操作——JavaScript怎样添加、移除、移动、复制、创建和查找节点

(1). 创建新节点 1 createDocumentFragment() // 创建一个DOM片段 2 createElement() // 创建一个具体的元素 3 createTextNode() // 创建一个文本节点 (2). 添加.移除.替换.插入 1 appendChild() 2 removeChild() 3 replaceChild() 4 insertBefore() // 在已有的子节点前插入一个新的子节点 (3). 查找 1 getElementsByTagName()