这是一篇正经的关于如何在页面上添加元素的步骤（改dom）

最新推荐文章于 2023-10-22 22:16:56 发布

Yannnnnm

最新推荐文章于 2023-10-22 22:16:56 发布

阅读量840

点赞数

分类专栏：小白文章标签： javascript

本文链接：https://blog.csdn.net/Yannnnnm/article/details/108295823

版权

小白专栏收录该内容

10 篇文章 0 订阅

订阅专栏

这篇文章简单的介绍在不z在html和css上直接动手在页面上添加元素的方法；
首先，这是一个空空的页面，里面什么都没有；
这时我们引入一个创建好的空script文件，以便后期增加内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./ys.js"></script>
</body>
</html>

步骤

创建一个新元素
设置关键属性或者内容
将元素增加到DOM树中

第一步

在创建这一部中，我们又可以引入几种常见的创建不同节点的方式：

document.createElement(“标签名”);
用于创建元素节点
document.createTextNode(‘文本内容’);
用于创建文本节点
document.createComment(‘这是注释信息’);
用于创建注释信息
document.createDocumentFragment();
用于创建文本片段
那么简单演示一下

	// 创建一个新的元素节点
	var odiv = document.createElement('div')
	console.log(odiv)
    // 创建一个新的文本节点
	var text = document.createTextNode('我是一个文本')
	console.log(text)
    // 创建一个注释节点
	var comment = document.createComment('我是一条注释')
	console.log(comment)
    // 创建一个文本片段
	var frag = document.createDocumentFragment()
	console.log(frag)

这里每一条输出了一下，方便我们看一下结果

第二步

设置关键的属性或者设置内容；
关键的属性主要是针对要给元素布局或者像一些特殊的元素，比如a元素，的href属性，input元素的type属性等等；
在设置内容中，一般我们用的比较多的是innerHTML和innerText赋值；
这里我们在创建几个标签，以方便下一步演示

    // 创建一个a元素
	var a = document.createElement('a')
    // 给a增加href属性
	a.href = 'https://www.baidu.com/'
    // 给a赋值
	a.innerText = '百度'
	console.log(a)
    // 创建一个input元素
	var input = document.createElement('input')
    // 给input标签增加type属性
	input.type = 'text'
	console.log(input)

看一下输出效果

第三步

将元素增加到DOM树中
这里有三种常见的方式

直接追加 parentNode.appendChild(新元素) 在父元素的最后追加元素
parentNode.append(“字符串”/新元素)，可以同时插入多个
插入：parentNode.insertBefore(待插入的元素, 哪个元素之前)
替换: parentNode.replaceChild(替换的元素, 被替换的元素);
这里演示分别演示一下

    // 创建一个span元素 
    var span1 = document.createElement('span')
   span1.innerText = '这是第一个span'
   // 创建一个span元素
   var span2 = document.createElement('span')
   span2.innerText = '这是第二个span'
   // 在div上加内容以便后期看效果
   odiv.innerText = '这是一个div'
   // 将div放在body上
   document.body.appendChild(odiv)
   // 加input框和a加在div上
   odiv.append(input, a)
   // 将第一个span插入到a标签前面
   odiv.insertBefore(span1, a)

此时效果为：

我们最后在看一下替换

    // 用第二个span替换第一个span
	odiv.replaceChild(span2, span1)

替换成功：

这里因为页面比较简单所以没有演示文本片段的作用，后期的博客会有详细的介绍；
当然，以上所以操作都可以对页面上存在的元素进行，相当于剪切
需要注意的是：更改元素结构即更改整个结构，效率极低，尽量少用

Yannnnnm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
这是一篇正经的关于如何在页面上添加元素的步骤（改dom）

这篇文章简单的介绍在不z在html和css上直接动手在页面上添加元素的方法；首先，这是一个空空的页面，里面什么都没有；这时我们引入一个创建好的空script文件，以便后期增加内容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1
复制链接

扫一扫