创建元素节点,文本节点以及在指定位置增加节点

no1、创建一个新的元素节点,并把它添加到body中

1 window.onload = t;
2 function t(){
3    var nodeli = document.createElement(‘li‘);
4    document.body.appendChild(nodeli);
5    nodeli.style.cssText = ‘width:300px;background:red;‘;
6 }

上面的显示效果为:

no2、创建一个元素节点,创建一个文本节点,将文本节点追加到元素节点上,再将元素节点追加到body中。

window.onload = t;
function t(){
   var nodeli = document.createElement(‘li‘);//创建一个li节点
   var li_text = document.createTextNode(‘文本节点‘);//创建一个文本节点
   nodeli.appendChild(li_text);//将文本节点追加到li节点上
   document.body.appendChild(nodeli); //将元素节点追加到body中
   nodeli.style.cssText = ‘width:300px;background:red;‘; //设置元素节点的样式
}

no3、在指定位置插入节点insertBefore(参数1,参数2):

第一个参数为要插入的心节点,第二个参数为已有的节点,就是插在谁的节点的前面。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <script>
 7 function t(){
 8   var nodeli = document.createElement(‘li‘); //创建一个li节点
 9   var li_text = document.createTextNode(‘文本节点‘); //创建一个文本节点
10   nodeli.appendChild(li_text);  //将文本节点追加到li节点上
11
12   var nodeUl = document.getElementsByTagName(‘ul‘)[0];  //获取第一个ul节点
13   var nodeli1 = nodeUl.getElementsByTagName(‘li‘)[2]; //这个表示永远在第三个之前插入。不管后面增加了多少次,每次都是从新的第三个开始插入。第一次是在秋天前插入,之后的都是最新的第三个节点前插入
14   nodeUl.insertBefore(nodeli,nodeli1); //函数insertBefore()表示在哪个节点之前添加。第一个参数为要插入的新节点,第二个参数为已有节点。
15 }
16 </script>
17 </head>
18
19 <body>
20 <ul>
21 <li>春天</li>
22 <li>夏天</li>
23 <li>秋天</li>
24 <li>冬天</li>
25 </ul>
26 <hr />
27 <button onclick="t()">在指定位置增加节点</button>
28 </body>
29 </html>

显示效果为:

时间: 2024-10-10 23:11:40

创建元素节点,文本节点以及在指定位置增加节点的相关文章

C语言写单链表的创建、释放、追加(即总是在最后的位置增加节点)

昨天周末给学妹讲了一些指针的知识,本来我对指针就是似懂非懂的状态,经过昨天一讲,我对指针的学习就更深刻了果然给别人讲课也是学习的一个方法.加上最近复习数据结构,发现我的博客里没有链表的博文,所以趁这时候加上一篇. 在此之前,我们先谈一下我要说的一些基本知识: ①函数参数为什么是双指针? 我们先写一下这么一个程序: # include<stdio.h>void Gai(int m){ m=5;}int main(void){ int a=1; Gai(a); printf("%d\n&

Javascript进阶篇——(DOM—节点---插入、删除和替换元素、创建元素、创建文本节点)—笔记整理

插入节点appendChild()在指定节点的最后一个子节点列表之后添加一个新的子节点.语法: appendChild(newnode) //参数: //newnode:指定追加的节点. 为ul添加一个li,设置li内容为PHP,代码如下: 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=

[ jquery 文档处理 wrapInner(htm|element|fnl) ] 此方法用于把所有匹配的元素的子元素(包括文本节点)使用指定的 HTML 元素来包裹

此方法用于把所有匹配的元素的子元素(包括文本节点)使用指定的 HTML 元素来包裹 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来 这个函数的原理是检查提供的第一个元素(它是由所提供的HTML标记代码动态生成的),并在它的代码结构中找到最上层的祖先元素--这个祖先元素就是包装元素 html HTML标记代码字符串,用于动态生成元素并包装目标元素 element 用于包装目标元素的DOM元素 fn 生成包裹结构的一个函数 实例: <html lang='zh-cn'> &l

DOM元素选择 属性操作 事件操作 节点操作 创建元素的区别

DOM 获取页面元素 document.getElementById('id'); // id 选择器 document.getElementsByTagName('div'); // 标签选择器 返回伪数组 // html新增 document.getElementsByClassName('box'); // 类名学则器 document.querySelector('#id'): // 返回指定选择器的第一个元素对象,里面写css选择器 document.querySelectorAll(

DOM(Document object madle) 文档对象模型: 元素节点 文本节点 属性节点

[DOM树节点] DOM 节点分为三大类:元素节点 文本节点 属性节点 文本节点 属性节点 为元素节点的两个子节点 通过getElement系列方法,可以去到元素节点. [查看节点] 1.document.getElementById:通过ID获取唯一的节点;多个同名ID,只会取第一个: 2.document.getElementsByName:通过name取到一个数组,包含1到多个节点: 使用方式:通过循环,取到每个节点.循环次数:从0开始,<数组.length   [查看和设置属性节点] 1

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

js中改变文档的层次结构(创建元素节点,添加结点,插入子节点,取代子节点,删除子节点)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1, .box2{ width: 300px; height: 250px; margin-top: 10px; margin-bottom: 30px;

创建、插入、删除、查询、替换dom节点的方法(JS实现)

1.创建元素节点:createElement 用法:document.createElement("p");//创建p标签: 创建文本节点:createTextNode; 用法:document.createTextNode("txt");//创建文本标签: 2.插入节点:appendchild:在要插入的元素节点上调用,他插入指定的节点使其成为那个节点的最后一个子节点. insertBefore:在已有的元素前插入一个新元素: insertAfter:在现有的元素

js文本对象模型[DOM]【续】(Node节点类型)

一.Document类型    document实例1.常用的一些属性documentElement 始终指向HTML页面中的<html>元素.body 直接指向<body>元素title 获取文档的标题images 获取所有的img对象    [返回类数组对象]forms 获取所有的form对象    [返回类数组对象]links 获取文档中所有带href属性的<area>和<a>元素referrer 取得链接到当前页面的那个页面的URL    [即来源页