DOM对标签的增删改

最新推荐文章于 2020-03-22 10:59:29 发布
最新推荐文章于 2020-03-22 10:59:29 发布
阅读量235 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fefsdf/article/details/53026967
版权
对标签增删改的基本操作

创建jsTest.html
html中的内容为
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- 标签的增删改 -->
<html>
<head>
  <title>DOM 基础</title>
  <link href='jsTest.css' type='text/css' rel="stylesheet"/>
  <script type="text/javascript">
//增加标签
     function createDiv(){
var div = document.createElement('div');  //创建标签
div.id = 'newDiv';
//document.body.appendChild(div);   //把div放到myDiv的后面
document.body.insertBefore(div,document.getElementById('myDiv'));  //把div放在myDiv的前面
}
//移除标签
function removeP(){
var p=document.getElementsByTagName("p")[0];
p.parentNode.removeChild(p);
}
//修改标签属性和内容
function changeId(){
var div=document.getElementById('myDiv');
div.id='testNewId';
}
//获取某标签中的内容
function getHTML(){
var div = document.getElementById('myDiv');
alert(div.innerHTML);
}
//嵌入新div
function changeHTML(){
var div=document.getElementById('myDiv');
div.innerHTML="<div>嵌入的新div</div>"
}
//第一种改变样式方法
function setStyle(){
var div=document.getElementById('myDiv');
div.style.background='#ffff00';
div.style.width=300+'px';
div.style.height=50+'px';
}
     //第二种改变样式方法
function useCSS(){
var div=document.getElementById('myDiv');
div.className='myDiv';
}
  </script>
</head>

<body>
<div id = "myDiv">
<p>p标签1</p>
</div>
<p>p标签2</p>
<button οnclick="createDiv()">创建Div</button>
<button οnclick='removeP()'>删除第一个P标签</button>
<button οnclick='changeId()'>修改Id</button>
<button οnclick='getHTML()'>获取HTML</button>
<button οnclick='changeHTML()'>改变HTML</button>
<button οnclick='setStyle()'>改变样式</button>
<button οnclick='useCSS()'>改变样式2</button>
</body>
</html>


创建jsTest.css文件，把他与jsTest.js放在同一个文件夹中
css中的内容为
.myDiv{
background-color:#ffff00;
width:300px;
height:50px;
}

更多方法可查看http://www.w3school.com.cn/网站
风中浮柳
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM方法添加标签
yin_991的博客
09-09 3929
DOM动态添加标签
DOM 增删改
w18789476022的博客
11-06 127
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ padding: 0; margin: 0; } #left{ float: left; width: 25%; border: 1px solid black; margin: 10p.
检索某类标签的属性，并对其值进行修改
xx
01-12 404
function dyjb(){//img是需要检索的标签，index和item则是相应每个标签的所有内容   mui('img').each(function(index,item){ //获取这个标签的属性src   var src = this.getAttribute("src"); //对src属性的内容检测是否有相应的字段 if(src.indexOf(appUrl) ==
DOM标签操作-增删改
05-26 546
<script> $(function(){ // 节点操作过程：1、先声明一个变量，2、使用追加函数追加到相应的位置 var $li = $("<li>列表2</li>") // 子级结尾添加：append(),一个对象只能添加一次，加完就没有了 $("ul").append($li) $("ul").append($li) // 把子级添加到父...
获取dom中多个同名id的元素
热门推荐
MrNoboday
10-24 1万+
示例html &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&g
JS DOM元素的增删改
weixin_45060872的博客
03-22 387
JS DOM元素的增删改DOM元素动态操作向页面添加元素appendChildinsertBeforeDOM元素动态操作向页面删除元素removeChidDOM元素动态操作向页面修改元素案例 DOM元素动态操作向页面添加元素 除了document.write、innerHTML、document.createElement(“标签名”) 直接在页面创建元素外， 还可以用appendChild和in...
htmljavascript增删改
04-22
JavaScript，作为客户端脚本语言，允许我们对HTML文档进行操作，实现数据的增删改功能，为用户提供实时反馈。在这个主题中，我们将深入探讨如何使用JavaScript来实现这些操作。 首先，让我们理解HTML的基础。HTML...
901_Grid增删改
05-03
2. **事件处理**：当用户在数据网格中执行增删改操作时，需要监听并响应相关的DOM事件，比如点击添加按钮、删除确认、单元格编辑等。 3. **API接口设计**：前端操作通常会触发后端API调用，以持久化数据。设计合适...
jsj table tr td 增删改
03-16
在编程上下文中，我们通常使用JavaScript来动态地增删改表格内容，以实现交互性和动态效果。下面将详细介绍如何使用JavaScript操作`table`、`tr`和`td`元素。 首先，创建一个HTML表格非常简单，如下所示： ```html...
通用WEB表格增删改操作（附源码）
03-01
总结，通用的Web表格增删改操作涉及前端的DOM操作、AJAX通信，以及后端的数据处理。通过学习和实践，开发者可以构建出功能丰富的数据管理界面，提升用户体验。提供的"dbgrid"源码是一个很好的学习材料，可以帮助我们...
window.open打开窗口并用post方式提交
风中浮柳的专栏
08-22 5761
在项目中打开新窗口的时候通过 window.open(CONTEXT_PATH + '/base/entryAddDataPageEditor.do?listCode=' + relaCode, '_blank', 'height=600, width=900, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no,sta...
extjs官方文档地址
风中浮柳的专栏
01-14 865
http://docs.sencha.com/extjs/4.2.1/
K-means聚类.py ACM比赛常用算法k-means算法
最新发布
07-14
K-means聚类.py ACM比赛常用算法k-means算法
C语言http请求方法.txt
07-13
c
K12教育行业专题研究报告：教育大模型启航，细分领域性能较优(1)
07-14
K12教育行业专题研究报告：教育大模型启航，细分领域性能较优(1)
大学生创业计划书(30)三份资料.doc
07-14
大学生创业计划书(30)三份资料.doc
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
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值