JavaScript实现在第N个<tr>标签上添加父标签

最新推荐文章于 2022-09-04 13:41:28 发布
最新推荐文章于 2022-09-04 13:41:28 发布
阅读量312 收藏
点赞数
分类专栏： JS 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/codsoul2/article/details/83985543
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ssssssss</title>
<script type="text/javascript">
function wrap(id, tag, index, wrapperTag) {
var obj = document.getElementById(id);
var targetObj = obj.getElementsByTagName(tag)[index]; //待操作的目标对象
var cloneObj = targetObj.cloneNode(true); //克隆一遍
var wrapper = document.createElement(wrapperTag); //创建指定的父标签
wrapper.appendChild(cloneObj); //把克隆得来的对象插入wrapper节点
obj.insertBefore(wrapper, targetObj); //把wrapper节点添加到目标对象前面
obj.removeChild(targetObj); //删除目标节点
}

window.onload = function() {
wrap('demo', 'p', 1, 'div'); //成功
//wrap('tab1', 'tr', 0, 'thead'); //失败
alert(document.getElementById("demo").innerHTML);
}
</script>
</head>

<body>
<table id="tab1" border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>A1</td>
<td>B1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
</tr>
</table>

<div id="demo">
<p>one</p>
<p>two</p>
<p>three</p>
</div>
</body>
</html>
codsoul2
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于tr的父节点
YIYIYIBURUXIN的博客
06-27 1050
在学习js过程中遇到一个问题： <table id="employeeTable"> <tr> <th>name</th> <th>email</th> <th>salary</th> </tr> <tr> ...
JavaScript DOM编程(如何获取HTML标签的父元素和子元素)
m0_65725031的博客
03-03 1万+
今天迎来了我们的JS的第四讲，今天就给家人们浅讲一下如何获取JS中的HTML标签的父元素和子元素，大家有什么不懂的可以私信我或者在下方评论，看到了会回复噢，也希望一直跟着我在学JS的家人们，继续坚持下去!!! ...
MySQL 性能优化神器 Explain 使用分析
weixin_34327223的博客
01-16 116
简介 MySQL 提供了一个 EXPLAIN 命令, 它可以对 SELECT 语句进行分析, 并输出 SELECT 执行的详细信息, 以供开发人员针对性优化.EXPLAIN 命令用法十分简单, 在 SELECT 语句前加上 Explain 就可以了, 例如: EXPLAIN SELECT * from user_info WHERE i...
javascript中怎么找父级标签和子级标签
SC2LQ的博客
07-16 7114
JS中查找父标签的方法：1、利用parentNode属性，语法“子元素对象.parentNode”；2、借助Jquery中的parent()或parents()方法，语法“子元素对象.parent()”或“子元素对象.parents()”。
JS中给元素添加父级标签
前端-尔嵘
10-21 4200
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>每日一文</title> </head> <body> <div class="shuai">shuai1</div&gt...
优化这段代码：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>计算∑N!</title> <style type="text/css"> table { background-color: #f2f2f2; width: 600px; height: 300px; margin: 20px auto; color: black; border: 20px ridge #9999cc; } td { font-size: 20px; font-weight: bold; text-align: center; } #button { width: 180px; height: 60px; } </style> <script src="sum_factorial.js" type="text/javascript" charset="utf-8"></script> </head> <body> <table border="0" cellspacing="" cellpadding=""> <tr> <td colspan="4"> 计算∑N! </td> </tr> <tr> <td colspan="2"> 输入整数N的值: </td> <td colspan="2"> <input type="text" id="n_text" value="" /> </td> </tr> <tr> <td colspan="2"> ∑N!= </td> <td colspan="2"> <input type="text" id="sum_text" value="" /> </td> </tr> <tr> <td colspan="2"> <input type="button" name="" id="button" value="计算∑N!" onclick="show()" /> </td> <td colspan="2"> <input type="reset" value="清空" id="button" /> </td> </tr> </table> </body> </html>
最新发布
05-28
1. 在`<meta>`标签中添加`viewport`，以适应不同设备的屏幕大小。同时，将`<meta>`标签移动到`<title>`标签前面，符合 HTML 5 标准。 ```html <meta name="viewport" content="width=device-width, initial-scale=...
html中p标签之间如何换行,用Javascript给文本段落加上p标签实现换行
weixin_39694264的博客
06-09 1685
最近在用node重写我的博客(憔悴了许多)，既然从wordpress转过来的，wordpress基本功能还是不能变的，无形中加大了开发难度。比如说加密算法，数据表关系串联，数据库高并发IO性能优化。。。等等一大堆需要解决的问题，要做就要做最好的，用最优的方法，最快的算法，最安全的code来以太阳肩并肩。起初以为增删改查就完事了，其实没那么简单。就连读取文章看似很简单的事情其实并不是想象那样，直接从...
如何使用HTML?10-18
weixin_58744201的博客
01-10 560
1.HTML表格 在 HTML 中，我们使用 <table> 标签来定义表格。HTML 中的表格和 Excel 中的表格是类似的，都包括行、列、单元格、表头等元素。但是 HTML 表格在功能方面远没有 Excel 表格强大，HTML 表格不支持排序、求和、方差等数学计算，它一般用来展示数据。 简单的表格创建： <table border="1"> <tr> <th>名称</th> <th>官网</
前端基础HTML
m0_59708269的博客
01-13 311
day01 1，web标准基于浏览器 c/s客户端到服务器 b/s浏览器到服务器 网页的划分 1.基本的结构 html 毛胚 2.表现： css 样式 装修的实现 3.行为： js 网页动起来 功能实现 2.HTML简述 官方：W3C万维组织。 1.Hyper text markup language（超文本标记语言） 2.特征：简单 不是一个编程语言。单纯的标记语言 3.基本结构语法 <!DOCTYPE html> 表示当
HTML基础
qq_27009517的博客
12-03 1490
HTML 标题标签 HTML 标题是通过<h1> - <h6>标签进行定义的，分别对应文档结构中的每一级标题。 下面的实例定义了所有标题。 <h1>这是标题 1</h1> <h2>这是标题 2</h2> <h3>这是标题 3</h3> <h4>这是标题 4</h4> <h5>这是标题 5</h5> <h6>这是标题 6</h6...
JavaScript如何添加父元素
KevinMiGuan的博客
10-08 4209
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;body&gt;     &lt;di
JS给指定元素添加父元素
Syclifer的博客
02-02 3308
var child = document.getElementById("child");// 获取子元素 var parent = document.createElement('parent');// 新建父元素 parent.className = 'parent'; child.parentNode.replaceChild(parent,child);// 获取子元素原来的父元素并将新父元素代替子元素 parent.appendChild(child);// 在新父元素下添加原来的...
javascript对指定元素添加父元素
良_123的专栏
09-04 934
在处理自己的文章博客时，有一个需求：当富文本编辑器中插入的表格过长的话，就给它设置一个横向滚动条。 本来是一个很简单的需求，也就是给指定的元素添加一个父div，让div拥有overflow: auto;属性就解决了。 我当时的实现代码是这样的： addDiv () { // 获取所有的table表格 let tables = document.querySelectorAll('table'); // 如果table存在于当前界面就执行接下的操作 if (tables) {
动态生成xml文贱，并动态添加节点，每次追加
lm18307210047的博客
07-16 1858
public void AddLog(string Account, string url,string pwd)//url为文件地址，即文件路径         {             StringBuilder xmlAccount = new StringBuilder();             if (!File.Exists(url))//判断是否存在，创建xml文档  
总结获取原生JS(javascript)的父节点、子节点、兄弟节点
热门推荐
Code鱼
04-25 7万+
关于原生JS获取节点，一直是个头疼的问题，而且调用方法的名字又贼长了，所以我选择用JQ，好像跑题了-- 话不多说看代码 获取父节点 及 父节点下所有子节点（兄弟节点） &lt;ul&gt; &lt;li&gt; &lt;textarea&gt;文本一&lt;/textarea&gt; &lt;input type=button value="复...
js如何给父元素添加两个子元素
Naughty_Fairy的博客
12-08 8090
很少用js创建元素，然后出bug解决了半天，只需要两行，搞了几个小时，必须得记录一下： 参考文章https://www.jb51.net/article/134880.htm 我需要的结构如下： 就是在div中创建一个img然后再创建一个span，但是使用appendChild每次只给最后一个div加了span，我通过jquery也添加，但结果一个div里面好几个span，最后通过克隆解...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值