DOM节点对象之创建和插入节点示例

示例:创建和插入节点。
  1、新建节点:createElement("节点名")
  2、新建文本节点:createTextNode("文本内容")
  3、将文本节点添加到新建节点中:appendChild(文本节点名)
  4、获取要插入节点的对象:getElementById("id名")
  5、将新建节点插入到目标节点对象中:insertChild(要插入节点名,目标节点位置)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
  function insertNode(){
    var elementnode = document.createElement("li");
    //var elementnode.setAttribute("id","text");
    var context = document.createTextNode("新建文本内容节点");
    elementnode.appendChild(context);
    var list = document.getElementById("list")
    list.insertBefore(elementnode,list.childNodes[2]);
  }
</script>
</head>

<body>
  <!-- <button onClick="insertNode()">insert</button>-->
  <input type="button" value="insert" onClick="insertNode()">
  <ol id="list">
    <li>原列表一</li>
    <li>原列表二</li>
  </ol>
</body>
</html>

时间: 2024-12-12 14:16:32

DOM节点对象之创建和插入节点示例的相关文章

javasript 的DOM 节点操作:创建,插入,删除,复制以及查找节点

DOM 含义: DOM 是文档对象模型(Document Object Model) 是一种基于浏览器编程的一套API 接口,我W3C 出台推荐的标准.其赋予了JS 操作节点的能力,当网页被加载时,浏览器就会创建页面的文档对象模型. 节点: 根据W3C的HTML DOM 标准,HTML 文档中的所有内容都是节点. 1. 整个文档是一个文档节点 2. 每个HTML元素是元素节点 3. HTML元素内的文本是文本节点 4.每个HTML属性都是属性节点 5.每个注释都是注释节点 所以HTML DOM

jQuery DOM操作-查询、创建、插入元素

DOM操作分类: DOM Core-处理任何一种使用标记语言编写出来的文档. DOM HTML-提供简明的记号来描述HTML元素及属性. DOM CSS-针对CSS的操作,主要用于获取和设置style对象的各种属性. 初始页面代码: 1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 2 <!DOCTYP

Query节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作

一.创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div>"; $('body').append(box); //将节点插入到<body>元素内部 二.插入节点 jQuery 提供了好几种个方法来插入节点: 1.内部插入节点方法  方法名 描述 append(content) 向指定元素内部后面插入节点 content append(func

jQuery节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作

一.创建节点 1 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div>"; 2 $('body').append(box); //将节点插入到<body>元素内部 二.插入节点jQuery 提供了好几种个方法来插入节点:1.内部插入节点方法  方法名 描述 append(content) 向指定元素内部后面插入节点 content append(fu

jQuery复习知识点(2、创建节点 3、插入节点)

创建节点的语法: $(html); 插入节点的语法: 话不多说直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery复习知识点(2.创建节点 3.插入节点)</title> <script type="text/javascript"src="../j

链表(15)----给定链表中间某个节点,将待插入节点插入给定节点之前

1. 链表定义 typedef struct ListElement_t_ { void *data; struct ListElement_t_ *next; } ListElement_t; typedef struct List_t_{ int size; int capacity; ListElement_t *head; ListElement_t *tail; } List_t; 2.给定链表中间某个节点,将待插入节点插入给定节点之前 先将待插入节点插入给定节点之后,然后交换这两个节

THML DOM / Element 对象操作

随着Vue等MVVM框架流行,操作DOM已经不想之前那么频繁,因此很多DOM的操作已经陌生,特此回顾HTML中DOM操作 获取Element节点 熟悉的有 通过ID获取,返回element对象            document.getElementById(elementId) 通过Name获取,返回element对象数组       document.getElementsByName(elementName) 通过TagName获取,返回element对象数组  document.ge

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

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

JavaScript之jQuery-3 jQuery操作DOM(查询、样式操作、遍历节点、创建插入删除、替换、复制)

一.jQuery操作DOM - 查询 html操作 - html(): 读取或修改节点的HTML内容,类似于JavaScript中的innerHTML属性 文本操作 - text(): 读取或修改节点的文本内容,类似于JavaScript中的textContent属性 值操作 - val(): 读取或修改节点的value属性值,类似于 JavaScript 中的value值 属性操作 - attr(): 读取或者修改节点的属性 - removeAttr(): 删除节点的属性 二.jQuery操作