JavaScript学习手册十四：HTML DOM——文档元素的操作（二）

最新推荐文章于 2025-03-31 21:00:00 发布

A cup of tea.

最新推荐文章于 2025-03-31 21:00:00 发布

阅读量1.2w

点赞数 37

分类专栏： # Web技术应用基础——javascript 文章标签： javascript js

本文链接：https://blog.csdn.net/qq_45823118/article/details/116090662

版权

HTML DOM——文档元素的操作

1.创建节点
2.插入节点
3.删除节点
4.替换节点
5.综合练习

1.创建节点

任务描述

1.本关任务：创建一个表单<form>节点。

2.具体要求如下：

创建一个form节点，然后赋值给变量newNode，设置节点的id值为myForm，method值为post，如下所示：

<form id="myForm" method="post"></form>

字符串类型参数用""包含在内。

相关知识

有的时候，我们需要往页面动态的添加文档元素（节点），比如根据省份的不同展现不同的城市列表，在添加节点之前需要先创建该节点。

创建节点

document.createElement("tagName")用来创建一个新的Element节点（即文档元素），返回值是新创建的节点，tagName是标签的名字，比如a、p、img等，需要注意的是它不区分大小写。

比如创建一个新的超链接节点：

var newA = document.createElement("a");//创建超链接节点
newA.src = "https://www.educoder.net";//设置超链接的目的地址

代码文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <p></p>
    <script>
    	<!-- 请在此处编写代码 -->
        <!---------Begin--------->
        
        var newNode = document.createElement('form');
        newNode.method='post';
        newNode.id='myForm';

        <!---------End--------->
		document.body.appendChild(newNode);
        console.log(newNode.method);
    </script>
</body>
</html>

2.插入节点

任务描述

ul标签在html中表示无序列表，li标签标识其中的列表项。

1.本关任务：在无序列表中插入新的列表项。

2.具体要求如下：

使用createElement方法创建一个li类型的新节点newNode；
通过innerText方法设置该节点内部文本的内容为Canada；
通过getElementById和appendChild方法将newNode节点添加到ul标签下面，作为它的最后一个子节点；
所有的字符串类型参数请用""包含在内；

相关知识

插入节点：插入一个新的文档元素。

最常见的应用就是在<select>标签里插入一个新的<option>标签。

插入节点

两种可选的方法：

方法1appendChild()
node1.appendChild(node2)表示将node2插入到node1的最后一个子节点中。

比如原来的选择框是这样：

<select id="s1">
    <option id="cs">长沙</option>
    <option id="zz">株洲</option>
</select>

要把它变成这样：

<select id="s1">
    <option id="cs">长沙</option>
    <option id="zz">株洲</option>
    <option >湘潭</option>
</select>

实现代码如下：

var node1 = document.getElementById("s1");
var node2 = document.createElement("option");
node2.innerText = "湘潭";
node1.appendChild(node2);

方法2insertBefore()
pNode.insertBefore(node1,node2)：将node1插入作为pNode的子节点，并且node1排在已存在的子节点node2的前面。

比如要把最开始的复选框变成这样：

<select id="s1">
    <option id="cs">长沙</option>
    <option>湘潭<

最低0.47元/天解锁文章