JavaScript prepend() 方法

2025年3月18日 | 阅读 5 分钟

javascript prepend() 方法在 html 父节点的所有子节点之前添加一组节点对象或 DOMString 对象。使用 prepend 方法在父节点有两种方式。

使用 prepend() 方法插入节点
使用 prepend() 方法插入文本

使用 prepend() 方法插入节点

数组节点使用 prepend() 方法获取第一个子节点的对象。这是一个简单的获取数组值父节点的 prepend 节点的方法。

语法

以下语法用于在父节点中预置数组节点。

它是如何工作的？

首先，创建带有列表标签的 html 页面。通过 id 或 class 选择列表元素。
在 script 标签中使用查询选择器选择特定的列表标签。
第二，声明要插入列表的数据数组。
使用“forEach”循环遍历数组中的元素。创建一个带有元素的新 li 标签。
将 textContent 分配给数组元素并返回数组数据。
最后，使用 javascript prepend() 方法将列表
元素预置到
示例
以下示例用于在父标签中预置数组节点或列表数据。
示例 1：以下示例展示了 prepend() 方法的基本操作。列表值显示在带有数组节点的 ul 标签中。这里，我们没有在 ul 标签中添加列表值。
<!DOCTYPE html> <html> <head> <title> JavaScript prepend() method </title> </head> <body> <h3> JavaScript prepend() method </h3> <p> Using the prepend() method to prepend node </p> <ul id = "language_value"></ul> <script> let languages_array = ['TypeScript', 'NodeJs', 'JavaScript', 'Jquery', 'AngularJs']; let lang_data = document.querySelector('#language_value') let lang_nodes = languages_array.map(lang => { let li_var = document.createElement('li'); li_var.textContent = lang; return li_var; }); lang_data.prepend(...lang_nodes); </script> </body> </html>
输出
prepend() 方法的数据显示为输出。
示例 2：以下示例展示了 prepend() 方法的基本操作。列表值显示在带有数组节点的 ul 标签中。这里我们在

JavaScript prepend() 方法

使用 prepend() 方法插入节点

使用 prepend() 方法插入文本

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

JavaScript prepend() 方法

使用 prepend() 方法插入节点

使用 prepend() 方法插入文本

结论

相关帖子

如何在 JavaScript 中移除对象的键/属性

Javascript Focus 方法

检查 JavaScript 中的数组是否为空、null 或 undefined

如何在 html 中添加 JavaScript

JavaScript Confirm

JavaScript Garbage

获取 JavaScript 中节点的子元素

Javascript 键盘事件

JavaScript change 事件

如何使用 JavaScript 为元素添加类

订阅 Tpoint Tech

联系信息

关注我们

教程