JavaScript之appendChild()、insertBefore()使用教程

明德zhuang

已于 2022-07-13 17:59:09 修改

阅读量1k

点赞数

文章标签： javascript 前端开发语言

于 2022-07-13 09:56:43 首次发布

本文链接：https://blog.csdn.net/weixin_44359479/article/details/125755353

版权

`appendChild()`方法

appendChild()方法：向当前节点的子节点列表的末尾添加新的子节点。用法如下：

appendChild(newchild)

参数 newchild 表示新添加的节点对象，并返回新增的节点。

示例：
新建两个盒子和一个按钮，使用 CSS 设计两个盒子显示为不同的效果；然后为按钮绑定事件处理程序，设计当点击按钮时执行插入操作。

代码：

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

<table width="600" border="3">
    <tr>
        <td height="200">
            <div id="red" style="width: 200px;height: 100px;background: #ff0026" align="center"><h1>红盒子</h1></div>
        </td>
    </tr>