DOM的增删改

最新推荐文章于 2024-08-23 20:55:13 发布
最新推荐文章于 2024-08-23 20:55:13 发布
阅读量181 收藏
点赞数
分类专栏： jQuery 文章标签： javascript html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZZZWWWFFF_/article/details/126805437
版权

1.内部插入

  • appendTo()

例如 a.appendTo(b) 是将a插入到b子元素末尾，成为最后一个子元素       

  • prependTo()

例如 a.prependTo(b)是将a插入到b子元素前面，成为第一个子元素

2.外部插入

  • insertAfter()

    例如a.insertAfter(b) 我们得到的 ba

  • insertBefore()

        例如a.insertBefore()我们得到 ab

3.替换

  • replaceWith()

例如 a.replaceWith(b) 表示用b替换a

  • replaceAll()

例如 a.replaceAll(b) 表示用a替换b

4.删除

  • remove()

例如 a.remove() 表示清空a标签（直接删除标签）

  • empty()

例如 a.empty()表示清空a标签的内容

ZZZWWWFFF_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JS的DOM增删
Jamtin的博客
08-17 155
JS的DOM增删 <body> <ul id="city"> <li>北京</li> </ul> <input type="button" id="btn01" value="按钮" /> </body> 增加元素节点li广州 <script type="text/javascript"> function myClick(id, fun) {
DOM 元素以及内容的增删改
iteval
07-17 182
一、DOM元素中的增加、删除、修改 1、创建元素 const div = document.createElement('div'); // 创建一个 div 元素 2、增加元素 const div = document.createElement('div'); // 创建一个 div 元素 document.getElementById('box').appendChild(div); // 创建好之后追加到 box 里面 document.getElementsByClassName('wapper
DOM的增删改查
weixin_44860226的博客
08-02 1011
onmouseover和onmouseout事件可用于在用户的鼠标移至HTML元素上方或移出元素时触发函数。如需向HTMLDOM添加新元素，您首先必须创建该元素（元素节点），然后把它追加到已有的元素上。HTMLDOM使JavaScript有能力对HTML事件做出反应。通过HTMLDOM，您能够访问HTML元素的样式对象。访问HTMLDOM-查找HTML元素。修改HTML=改变元素、属性、样式和事件。"已启用cookie""未启用cookie"...
DOM操作元素的增删改
qq_43184101的博客
07-03 104
dom的增删改，创建DOM的元素节点，文本节点。 末尾处插入，前面插入，移除节点。属性名的增删改。
DOM实现增删改查
qq_65168354的博客
11-01 161
不知道大家发没发现，很多时候啊，我们不方便直接在body里面写标签以及样式那些，之后我们又会从后台获取数据，然后再放到界面上，哎呀，没学过DOM的小伙伴就头疼了，这可怎么办啊，好难写啊。不怕，我下面就写几个简单的DOM增删改查的操作，我们大家一起来认识认识。
DOM操作-元素的增删改查
m0_68348293的博客
07-17 194
代码】元素的增删改查。
04.dom增删改.html
07-01
04.dom增删改.html
超强 DOM增删改,js日历综合案例实现
03-21
本案例"超强DOM增删改,js日历综合案例实现"将聚焦于如何利用JavaScript的DOM操作来创建一个实用的日历工具，即wpCalendar.js。 首先，我们来看`wpCalendar.js`这个文件。这通常是一个JavaScript库，包含了实现日历...
htmljavascript增删改
04-22
JavaScript还可以与服务器进行通信，利用Ajax（Asynchronous JavaScript and XML）技术实现数据的增删改。通过XMLHttpRequest或现代浏览器的fetch API，可以发送HTTP请求到服务器，更新数据库，并获取最新的数据。...
使用js dom和jquery分别实现简单增删改
10-25
在本文中，我们将探讨如何使用JavaScript的原生DOM操作和jQuery库来实现Web页面上的基本增删改功能。这些功能对于前端开发至关重要，因为前端交互往往涉及动态地修改网页内容。 首先，我们来了解一下什么是DOM...
javascript实现表格增删改操作实例详解
10-24
JavaScript实现表格增删改操作时，可以通过操作DOM元素来完成。例如，通过`document.getElementById`获取HTML元素的引用，使用`createTextNode`创建新的文本节点，通过`insertCell`和`insertRow`等方法动态添加...
nodejs安装
a1241436267的博客
08-19 442
版本控制nodejs版本:v17.3.1npm版本:8.3.0安装流程。
vue开发引入第三方插件的方式及其区别
你们瞎搞
08-22 336
npm。
【js】各类前端输入校验方法
galaxyJING的博客
08-21 350
【代码】【js】各类前端输入校验方法。
Nuxt3【内置的工具函数】2024最新版
朝阳39的博客
08-20 1000
用于在Vue应用程序或API路由中进行HTTP请求，详见。
React学习笔记，从入门到砸门
留白声的博客
08-20 1038
react详细自我学习笔记，内容包括JSX、Redux、Router等
Ant-Design-Vue快速上手指南+排坑，操作详细步骤
最新发布
liyy614的博客
08-23 762
总的来说，掌握Ant-Design-Vue的基本使用并不复杂，但是要想充分利用其提供的功能，就需要深入了解每个组件的详细用法，以及如何合理地整合到你的项目之中。Ant-Design-Vue是一款基于Vue.js的UI组件库，它不仅提供了丰富的高质量组件，还支持灵活的配置选项，使得开发者能够快速构建出既美观又功能强大的前端应用。例如，当你首次注册Ant Design Vue时，需要确保Vue实例已经正确创建并且版本兼容。再如，在按需引入组件的时候，配置正确的webpack策略可以避免不必要的资源请求。
【Vue】：利用 vue-drag-resize 拖拽缩放插件，实现对元素的拖拽以及拉伸操作，从而调整元素的宽度和高度
Anislandwhale的博客
08-21 920
“vue-drag-resize” 是一个用于 Vue.js 的插件，它允许你在 Vue 应用中轻松实现可拖拽和可调整大小的元素
Vue :class 绑定可以结合多个判断维度来动态设置类
u010865136的专栏
08-19 237
二、:class="[isMute && 'disabled', env.isH5 && 'TUIChat-H5-footer']"一、数组语法允许你根据条件动态添加多个类名。数组中的每个元素可以是一个类名的字符串，或者是一个对象。对象中的键是类名，值是布尔值。
react 动态增删改路由
06-01
在React中，我们可以使用`react-router-dom`库来动态增删改路由。下面是一个简单的例子，演示如何使用`react-router-dom`库来动态增删改路由。 首先，我们需要在应用程序中安装和导入`react-router-dom`库： ```javascript npm install react-router-dom ``` ```javascript import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'; ``` 接下来，我们可以定义一个组件，用来显示一个列表，并添加一些按钮用于动态增删改路由： ```javascript import React from 'react'; import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'; const App = () => { const [routes, setRoutes] = React.useState([ { id: 1, path: '/route/1', component: Route1 }, { id: 2, path: '/route/2', component: Route2 }, ]); const addRoute = () => { const newRoute = { id: routes.length + 1, path: `/route/${routes.length + 1}`, component: () => <h1>New Route {routes.length + 1}</h1>, }; setRoutes([...routes, newRoute]); }; const removeRoute = (id) => { setRoutes(routes.filter((route) => route.id !== id)); }; const updateRoute = (id, path) => { setRoutes( routes.map((route) => route.id === id ? { ...route, path } : route ) ); }; return ( <Router> <div> <nav> <ul> {routes.map((route) => ( <li key={route.id}> <Link to={route.path}>Route {route.id}</Link> <button onClick={() => removeRoute(route.id)}>X</button> <button onClick={() => updateRoute(route.id, '/new-path')}> Update </button> </li> ))} </ul> <button onClick={addRoute}>Add Route</button> </nav> <Switch> {routes.map((route) => ( <Route key={route.id} path={route.path} component={route.component} /> ))} </Switch> </div> </Router> ); }; const Route1 = () => { return <h1>Route 1</h1>; }; const Route2 = () => { return <h1>Route 2</h1>; }; export default App; ``` 在上面的代码中，我们使用`useState` hook来管理路由数组。然后，我们定义了三个函数：`addRoute`，`removeRoute`和`updateRoute`，分别用于添加、删除和更新路由。这些函数都会更新路由数组，并使用`setRoutes` hook来重新渲染应用程序。 在`render`方法中，我们首先渲染一个导航栏，其中包含一个用于添加新路由的按钮，以及每个路由的删除和更新按钮。然后，我们渲染一个`Switch`组件，其中包含每个路由的`Route`组件。 当用户点击“添加路由”按钮时，`addRoute`函数会创建一个新的路由对象，并将其添加到路由数组中。当用户点击“删除”按钮时，`removeRoute`函数会从路由数组中删除具有指定ID的路由。当用户点击“更新”按钮时，`updateRoute`函数会更新具有指定ID的路由的路径。 最后，我们使用`map`函数将每个路由渲染为导航栏中的一个链接，并将每个路由渲染为`Route`组件。 这是一个简单的例子，演示了如何使用`react-router-dom`库来动态增删改路由。你可以根据自己的需求进行修改和扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ZZZWWWFFF_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值