JavaScript 13 更新、删除、创建和插入 DOM节点

最新推荐文章于 2022-04-24 20:54:21 发布

牟泉禹[Dark Cat]

最新推荐文章于 2022-04-24 20:54:21 发布

阅读量220

点赞数

分类专栏：学习笔记文章标签： javascript

BY-牟泉禹/MuQuanyu

本文链接：https://blog.csdn.net/qq_52606908/article/details/119134663

版权

学习笔记专栏收录该内容

387 篇文章 11 订阅

订阅专栏

4.4 更新 DOM 节点

节点.innerText = "修改的文本的值"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id = "id1">

</div>
<script>
  let id1 = document.getElementById('id1');
  
</script>

</body>
</html>

id1.innerText = "wowwowow"

在这里插入图片描述

节点.innerHTML = 'HTML代码' （可以把该节点的内容更新为 html 的代码。）

id1.innerHTML = "<ul><li>oneA</li><li>towB</li><ul>"

在这里插入图片描述

节点.style.css修饰词 = "修饰的属性值" 更新该节点的样式

id1.style.color="red"
id1.style.fontSize = '28px'

在这里插入图片描述

JS 的魅力就在于 DOM 节点！！如果 DOM 节点用好了，就可以让网页中的元素都动起来。

4.5 删除 DOM 节点

通过父节点删除自己

var fater = document.getElementsByTagName("ul");
fater[0].removeChild(fater[0].firstElementChild);

在这里插入图片描述

子节点.parentElement 通过子节点找父节点

var p1 = document.ElementById("id");
var father = p1.parentElement;

4.6 插入、创建 DOM 节点

节点.appendChild(节点)（通过节点来移动现有节点，就是把现在有的节点插入（追加）到指定节点的后面。）

list.appendChild(js)
list.appendChild(ee)

在这里插入图片描述

document.createElement('p')（创建一个新的节点，把它往里面插入，这个新的节点可以是html任意的元素。）

var newP = document.createElement("p");
undefined
newP.innerText = "我是新的节点";
"我是新的节点"
ee.append(newP)
undefined

在这里插入图片描述

节点.setAttribute('属性','属性值')如何添加或更改节点的属性（这是一个非常万能的方法）

let myScript = document.createElement("script");
  myScript.setAttribute("type","text/javascript");
  myScript.setAttribute("src","");
  
var head = document.head
undefined
head.append(myScript);
undefined
head

在这里插入图片描述

节点.Before（插入在该节点的前面）

js.before(me);

在这里插入图片描述

牟泉禹[Dark Cat]

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 13 更新、删除、创建和插入 DOM节点

4.4 更新 DOM 节点节点.innerText = "修改的文本的值"<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id = "id1"></div><script> let i
复制链接

扫一扫

专栏目录