DOM 动态创建节点实例

最新推荐文章于 2021-06-23 02:09:53 发布
最新推荐文章于 2021-06-23 02:09:53 发布
阅读量289 收藏
点赞数
未经允许不得随意转载，著作权归__盛某人所有
本文链接：https://blog.csdn.net/NaXieNianWoMenYiQ/article/details/86669002
版权 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>DOM 动态创建节点</title>
     <script>
     //创建一本书
     function newNode(){
	     	//1.创建一个元素节点
	      var book=	document.createElement("li");
	       //2.创建一个文本节点
	       var bookNode=document.createTextNode("《西游记》");
	       //3.把文本添加到Li节点中
	       book.appendChild(bookNode);
	       //4.把li节点添加到ul中
	       //获取ul元素节点
	//     var books=document.getElementById("books");
	       //appendChild():把子节点添加到父节点的最后位置
	//     books.appendChild(book);
	       
	       //获取指定插入的位置
	       var book2=document.getElementById("book2");
	       //插入  insertBefore(新节点，插入位置)：把新节点添加到某一个元素的前面
	       book2.parentElement.insertBefore(book,book2);
     }
      
      //删除节点
     function rmChild(){
	     	//1.获取要删除的父节点
	     	var stars=document.getElementById("stars");
	     	//2.获取要删除的子节点
	     	var fanbingbing=document.getElementById("fanbingbing");
	     	//3.执行删除
	     	stars.removeChild(fanbingbing);
     }
      
	</script>
</head>
<body>
    <h2 >喜欢的书籍</h2>
		<input id="b1" type="button" value="增加一本书" onclick="newNode()" />
		<input id="b2" type="button" value="删除节点" onclick="rmChild()"/>
		<br />
		<ul id="books">
		<li id="book1">《三国演义》</li>
		<li id="book2">《水浒传》</li>
		<li>《红楼梦》</li>
	</ul>
		<h2>你最喜欢哪些明星</h1>
	<ul id="stars">
		<li id="fanbingbing">范冰冰</li>
		<li id="liudehua">刘德华</li>
		<li>王宝强</li>
	</ul>
</body>
</html>
小菜鸡_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
DOM 动态创建节点
知来者犹可追
11-17 2200
1、创建一个节点 createElement(“标签名”): 按照给定的标签名创建一个新的元素节点. 方法只有一个参数：被创建的元素节点的名字, 是一个字符串. 方法的返回值：是一个指向新建节点的引用指针. 返回值是一个元素节点, 所以它的 nodeType 属性值等于 1，新元素节点不会自动添加到文档里, 它只是一个存在于 JavaScript 上下文的对象。 //1.创建一个li元素节点...
DOM节点的创建
leejj_520的博客
04-05 426
1、DOM创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点，从而进行一系列的DOM操作。但实际上一般开发者都习惯性的先定义好HTML结构，但这样就非常不灵活了。 试想下这样的情况：如果我们通过AJAX获取到数据之后然后才能确定结构的话，这种情况就需要动态的处理节点了。 本文向大家介绍一下如何使用JavaScript创建div节点元素，主要包括创建div节点元素的属性和创
JavaScript基础（DOM）-Document对象、Element 对象、Attribute 对象、动态的创建 删除 添加节点
muzidigbig的博客
11-25 3294
JavaScript HTML DOM（文档对象模型） 通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。 要改变页面的某个东西，JavaScript 就需要获得...
Dom 动态创建节点
__盛某人的博客
01-28 518
创建一个元素节点: 1). createElement(“标签名”): 按照给定的标签名创建一个新的元素节点. 方法只有一个参数：被创建的元素节点的名字, 是一个字符串. 方法的返回值：是一个指向新建节点的引用指针. 返回值是一个元素节点, 所以它的 nodeType 属性值等于 1. 新元素节点不会自动添加到文档里, 它只是一个存在于 JavaScript 上下文的对象. 创建一个文本节...
DOM动态创建标记实例
袅袅青烟散的博客
10-06 427
本文实例来源于《JavaScript DOM编程艺术（第二版）》第8章 知识点可参考上一篇博客《DOM动态创建标记》，地址：http://blog.csdn.net/ruirui_1996/article/details/78158925目录1.实例描述 2.创建“缩略语列表”函数 3.创建“文献来源链接”函数 4.创建“快捷键清单”函数1.实例描述 有这样一个网页，HTML代码如下：<h
动态创建节点
qq_44543292的博客
04-16 608
CSS代码 HTML代码 DOM创建节点及节点属性 JavaScript 创建流程： a) 创建节点(常见的：元素、属性和文本) b) 添加节点的一些属性 c) 加入到文档中 流程中涉及的一点方法： a) 创建元素：document.createElement b) 设置属性：setAttribute c) 添加文本：innerHTML d) 加入文档：appendChild jQuery节...
JQuery创建DOM节点的方法
01-19
在DOM操作中，常常需要动态创建HTML内容，使文档在浏览器里的呈现效果发生变化，并且达到各种各样的人机交互的目的。 HTML DOM结构如下： 欢迎访问软件开发网>欢迎访问软件开发网 简单易懂的PHP编程</li>
jQuery创建DOM元素实例解析
12-10
然而，传统的DOM操作往往涉及到多个步骤，如`document.createElement()`来创建元素，`document.createTextNode()`来创建文本节点，以及`appendChild()`来将这些节点添加到文档中。这不仅繁琐，而且代码可读性不强。...
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
10-20
这个过程展示了如何通过DOM动态生成HTML内容并将其添加到网页的指定位置。 （二）删除元素： 删除HTML元素则需要用到`removeChild()`方法。在删除元素之前，我们需要先找到元素的父节点，然后调用`removeChild()`...
DOM节点深度克隆函数cloneNode()用法实例
09-03
`cloneNode()`函数是DOM节点对象的一个方法，它用于创建当前节点的一个副本。这个副本可以是浅复制或深复制，这取决于传递给`cloneNode()`函数的参数。如果参数为`true`，则执行深度复制，复制节点及其所有子节点；...
JS动态创建html节点
08-11
1 var tt = document.getElementById("tr1"); for (var i = 0; i < 10; i++) { var FF = document.createElement(""); FF.innerText = 'td'+ i; tt.appendChild(FF); } ...............
DOM节点的替换或修改函数replaceChild()用法实例
09-03
DOM节点的替换和修改是JavaScript中动态操作网页内容的基础。`replaceChild()`函数提供了便利的方法，让我们能够轻松地更新文档结构，实现丰富的交互效果。通过实例学习，我们可以更好地理解和掌握这一功能，从而在...
js动态创建dom元素示例
ABC__D的专栏
05-09 3073
js中有时候需要动态的创建代码，这也是常规的基础知识，再次我总结一下，以备后用！ 直接上代码： //动态添加一个标签 function add(){ var map = document.getElementById("planetmap"); var x=180;
创建一个超简单的虚拟DOM实例
6块腹肌的博客
06-27 1537
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>创建一个超简单的虚拟DOM实例</title> </head> <body> <script> function Element({tagName, props, c...
创建 DOM 元素的几种方式
angry_rooster的博客
06-23 8550
通过write()、createElement()和innerHTML创建元素 document.write() document.write()是向文档写入内容，参数是一个包含要写入文档的文本的字符串 document.write(markup); 类似的还有一个document.wirteln()，只是最后紧跟一个换行符 如果字符串中有标签元素，会被识别为标签元素，并在文档中创建一个对应元素节点 但如果在文档加载完毕后才调用document.write()，则会重写整个文档，将之前所有的内容覆盖
动态创建dom节点，并用回调函数控制样式，实现代码复用
then啥
10-15 803
var appendDiv=function(count,cb){ for(let i=0;i&lt;count;i++){ let div=document.createElement('div'); //创建 div.innerHTML=`This is the ${i} div`; //设置内容 document.bod...
Js(DOM)动态添加节点和事件
热门推荐
zxl0016的专栏
03-10 1万+
function addEl(){    //找到要添加节点的父节点(table)    var tb = document.getElementById("tb");    //创建tbody节点，表格中必须有tbody才能添加，直接添加tr不成功    var tbody = document.createElement("tbody");    //创建tr节点    var t
DOM动态添加HTML节点 appendChild、removeChild
pan_junbiao的博客
07-07 1万+
1、函数语法 createElement(name)：方法可创建元素节点，此方法可返回一个 Element 对象。 appendChild(node)：方法在指定元素节点的最后一个子节点之后添加节点，该方法返回新的子节点。 removeChild(node)：方法可从子节点列表中删除某个节点。 elementNode.childNodes：属性返回包含被选节点的子节点的 NodeList。...
JavaScript DOM编程艺术：创建与操作节点
1. **创建节点**：`createElement()`方法用于创建新的元素节点，接受一个参数——要创建的元素的标签名，返回一个指向新元素节点的引用。新创建的节点不会自动添加到文档中，需要使用`appendChild()`或`insertBefore...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值