dom的节点操作

<script type="text/javascript">
window.onload = function(){
var demo = document.getElementById("demo");
var btn = document.getElementsByTagName("button")[0];//第一个孩子

//创建新的节点(标签)
var newul = document.createElement("li");
newli.innerHTML = "文字";
//插入节点
demo.appendChild(newli);  //在demo内插入一个li标签 子节点放在父亲最的后面
//克隆节点
demo.appendChild(demo.cloneNode());
//添加到后面
demo.parentNode.appendChild(demo.cloneNode());

}
</script>
</head>
<body>
<button>点击创建节点</button>
<ul id="demo">

</ul>
</body>

时间: 2025-01-13 10:24:50

dom的节点操作的相关文章

笔记-[1]-DOM的节点操作详解.

DOM:文档对象模型 操作DOM基本就是操作DOM的元素节点. 节点的属性: 1:objElement.childNodes  :获取该元素对象的的节点集合,有length长度属性,在标准浏览器下使用,会辩认文本节点的节点,一般不用,有其他的更好的属性(children) 2:objElement.children :     获取该元素对象的的节点集合,有length长度属性,在ie8下和其他标准浏览器兼容,只获取元素节点. 3:obj.nodeType   :获取对象的节点类型,1为元素节点

DOM之节点操作

DOM提供了很多实用的API,这些API让我们可以轻松的访问HTML文档.所谓API(应用程序接口),简单来说,就是让我们可以直接使用它访问程序的一些属性或方法,而不用了解程序内部的运作过程和原理. 前面我们已经了解了DOM把HTML文档解析为节点树,实际上HTML节点树只是整个DOM树的一个分支,另一个分支则是XML.在详细介绍HTML DOM节点的操作之前,先来看一下完整的DOM树: 网上没找到关于完整的DOM树的图,所以自己大致做了一个.准确说这个应该叫DOM继承树,因为很多我们常用的DO

0166 DOM 之 节点操作: 删除节点,删除留言案例,复制(克隆)节点,动态生成表格案例,创建元素的三种方式,innerHTML和createElement效率对比

1.1.1 删除节点 node.removeChild(child) // 此处的node指 父节点 node.removeChild() 方法: 从 node节点中删除一个子节点,返回删除的节点. <button>删除</button> <ul> <li>熊大</li> <li>熊二</li> <li>光头强</li> </ul> <script> // 1.获取元素 va

深入理解DOM节点操作

× 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节点操作方法 前提 DOM提供节点操作的方法是因为DOM节点关系指针都是只读的 下列代码中想通过修改myUl的父级节点来修改其节点关系,但由于parentNode属性是只读的,所以修改无效,在IE8-浏览器下甚至会报错 <div id="myDiv"></div> &

JS Dom节点操作demo!

通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ return document.createElement(tagName); } var table = c('table'); var tbody = c('tbody'); table.appendChild(tbody); for(var i = 0;i<4;i++){ var tr = c(

jQuery DOM 节点操作

DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面中的元素结构就是通过这种节点模型来互相对应着的,我们只需要通过这些节点关系,可以创建.插入.替换.克隆.删除等等一些列的元素操作. 一.创建节点 为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么 在插入之前首先要做的动作就是:创建节点. $('div').append('<strong>节点</strong>'); //向 div 内部插入 strong 节点 $('di

DOM 节点操作

DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面中的元 素结构就是通过这种节点模型来互相对应着的,我们只需要通过这些节点关系,可以创建. 插入.替换.克隆.删除等等一些列的元素操作. 一.创建节点 为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么 在插入之前首先要做的动作就是:创建节点. //创建一个节点  var box=$('<div id="box">节点</div>'); //将节点插入到&

(转载)html dom节点操作(获取/修改/添加或删除)

DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下 HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准.在 HTML DOM 中,所有事物都是节点.DOM 是被视为节点树的 HTML. 根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点 注释是注释节

jQuery DOM节点操作

一.创建节点 var box = $('<div id =box>节点</div>');  //创建一个节点 $('body').appended(box); //将节点插入<body>元素内部 二.插入节点 内部插入节点方法 append(content)     向指定元素后面插入节点content append(function (index,hml) {}) 使用匿名函数向指定元素后面插入节点content(html是原节点) appendTo(content)