博主信息
WSC
博文
8
粉丝
0
评论
0
访问量
525
积分:0
P豆:16

JavaScript:dom元素的增删改查操作

2021年04月07日 23:34:24阅读数:72博客 / WSC

dom元素的增删改查操作

  1. <script>
  2. // 创建一个列表
  3. const ul = document.createElement("ul");
  4. // 用循环来生成多个列表项li
  5. for (let i = 1; i <= 5; i++) {
  6. let li = document.createElement("li");
  7. li.textContent = `item${i}`;
  8. //append():在尾部追加节点
  9. ul.append(li);
  10. }
  11. document.body.append(ul);
  12. // prepend(): 在头部追加节点
  13. li = document.createElement("li");
  14. li.textContent = "第一个";
  15. li.style.color = "blue";
  16. ul.prepend(li);
  17. //在除了头尾之外的地方添加,必须要有一个参考节点的位置
  18. // 以第四个节点为参考
  19. const referNode = document.querySelector("li:nth-of-type(4)");
  20. referNode.style.background = "red";
  21. // 在它之前添加一个新节点
  22. li = document.createElement("li");
  23. li.textContent = "在参考节点前插入";
  24. li.style.background = "yellow";
  25. // referNode.before(el),在插入位置(参考节点)上调用
  26. referNode.before(li);
  27. // 在它之后添加一个新节点
  28. li = document.createElement("li");
  29. li.textContent = "在参考节点后插入";
  30. li.style.background = "cyan";
  31. // referNode.after(el),在插入位置(参考节点)上调用
  32. referNode.after(li);
  33. // replaceWith():替换节点
  34. // 将最后一个节点用链接替换
  35. let lastItem = document.querySelector("ul li:last-of-type");
  36. let a = document.createElement("a");
  37. a.textContent = "php中文网";
  38. a.href = "http://php.cn";
  39. lastItem.replaceWith(a);
  40. // 删除节点,在被删除的节点上直接调用
  41. // 将ul的第6个删除,remove(无参数)
  42. ul.querySelector(":nth-of-type(6").remove();
  43. // insertAdjacentElement('插入位置', 元素)
  44. // afterBegin: 起始始标签之后,第一个子元素
  45. // beforeBegin: 起始标签之前,是它的前一个兄弟元素
  46. // afterEnd: 结束标签之后,它的下一个兄弟元素
  47. // beforeEnd: 结束标签之前,它的最后一个子元素
  48. li = document.createElement("li");
  49. li.textContent = "插入的元素";
  50. // 起始始标签之后
  51. ul.insertAdjacentElement("afterbegin", li);
  52. // 起始标签之前
  53. ul.insertAdjacentElement("beforebegin", li);
  54. // 可以直接使用html字符串当元素
  55. ul.insertAdjacentHTML(
  56. "beforeend",
  57. '<li style="color:red">插入的元素</li>'
  58. );
  59. // 直接插入文本
  60. const h2 = document.createElement("h2");
  61. // 结束标签之前
  62. h2.insertAdjacentText("beforeend", ul.lastElementChild.textContent);
  63. // 结束标签之后
  64. // document.body.insertAdjacentElement("afterend", h2);
  65. </script>

批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • 这篇文章主要介绍了AJAX实现数据,结合实例形式技巧,需要朋友可以参考下。
    phpmysql方法:1、插入语句【insert into 数据表名(字段1,字段2,....) values("值1","值2",..)】;2、除语句
    负责数据库中数据库语言是:数据纵语言DML(Data Manipulation Language),主要负责数据基本,包括询及加、除、修
    我们之前了解过数据库,但是对于数据库只是有了简单了解,下面跟着小编一起去学习数据库询记录其他吧。
    今天本栏目介绍PHP7进行数据库,讲解连接、,有需要朋友可以看看,有问题可以评论讨论。
    对数据库管理分为写。写,即利用PDO实现数据库过程中要考虑到SQL本身可能出现错误处理,以及对结果处理。
    layui:本文为大家分享了利用layui实现方法,具有一定得参考价值,希望可以帮助到大家。
    下面由thinkphp​教程栏目给大家介绍ThinkPHP 数据库,希望对需要朋友有所帮助!
    Javascript中数组是使用频次较高数据类型,对数组是对数组常见,而splice()更是对数组一大利器,本文就带大家一起来看一看。
    本篇文章和大家通过代码示例看看nodejs数据库进行方法。有一定参考价值,有需要朋友可以参考一下,希望对大家有所帮助。
    dml语句是sql数据语句之一,可以对表进行,本篇文章对初学者来说又或是需要进行sql复习人来说都有很大帮助,跟着小编一起学习吧。
    前端和PHP有区别,PHP主要用于后端处理数据和数据,,而Web前端所包括HTML、JS、CSS等用于把界面和数据显示给用户,其次就是语法各不相同,运行环境或位置不同。
    PHP中我们经常需要连接数据库,对数据进行,之前对数据库一般使用mysqli连接方式,但是随着PDO优势逐渐显现,PDO连接方式成为主流,本文就带大家一起来看一看,利用PDO连接后返回
    数据库表分区可提升插入效率;数据库表分区可提高表效率。数据库表分区进行插入原理:当写入一条记录时,分区层打开并锁住所有底层表,然后确定哪个分区接受这条记录,再将记录写入对应底层表。