添加内容

  1. //先保存div中原来的html
  2. var tag = document.getElementById("tag").innerHTML;
  3. //构造新的内容
  4. var couhtml = '<select id="options" name="options" class="form-control input-ssm"><option value = "0" > 请选择</option></select><button type="button" style="margin-left: 4px;" class="btn btn-primary btn-sm" id="cde2" onclick="addOption()">删除</button>';
  5. //追加内容
  6. document.getElementById("tag").innerHTML = tag + couhtml;

删除标签

  1. //某个标签
  2. var tag = document.getElementById("tag");
  3. //删除
  4. tag.parentNode.removeChild(tag);

完整的html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  7. </head>
  8. <body>
  10. <div id="tag">我是div中的文字，后面的内容是js追加的，不关我的事</div>
  11. <script>
  12.     //先保存div中原来的html
  13.     var tag = document.getElementById("tag").innerHTML;
  14.     //构造新的内容
  15.     var couhtml = '<select id="options" name="options" class="form-control input-ssm"><option value = "0" > 请选择</option></select><button type="button" style="margin-left: 4px;" class="btn btn-primary btn-sm" id="cde2" onclick="addOption()">删除</button>';
  16.     //追加内容
  17.     document.getElementById("tag").innerHTML = tag + couhtml;
  19.     /*//某个标签
  20.     var tag = document.getElementById("tag");
  21.     //删除
  22.     tag.parentNode.removeChild(tag);*/
  23. </script>
  24. </body>
  25. </html>

通过js给某个标签添加内容或者删除标签的更多相关文章

  1. /.nav-tabs :是普通标签页 .nav-pills:胶囊式标签页 action ;默认的激活项，给<li>加默认显示的是哪个标签页内容 .nav是标签页的一个基类，给ul加 .nav-stacked: 垂直排列BootStrap

    <meta name="viewport" content="with=device-width, initial-scale=1, user-scalabe=no ...

  2. 【节点-添加标签】【节点-删除标签】【显示年-月-日-星期】【math算数】【正则表达式】

    1.节点-添加标签 <body><div id="div1"><p id="p1">这是一个段落.</p>< ...

  3. Node.js 向一个文件添加内容

    最简方案: fs.appendFile('message.txt', 'data to append', function (err) { }); 参考文档: http://www.codeweblo ...

  4. vue.js实现点击后动态添加class及删除同级class

    最近使用vue需要实现一个点餐选择商品规格的页面,需要通过vue动态的给被点击的元素添加class名字,使其变色,其他的删除class.如图: 开始在网上找了许多办法发现不是太好用,最后找到一个发现还 ...

  5. Python之pptx实现添加内容与删除（移动）页操作

    问题背景 大量表格数据需要生成指定格式的ppt文件,内容以文字和表格为主,首尾页与内容有固定格式.博主不熟悉VBA操作,希望通过模板用Python完成自动化. 基本思路 使用xlrd模块读取xlsx文 ...

  6. js html标签select 中option 删除除了第一行外的其他行

    背景:共两个下拉框,第一个下拉框选择完之后,以第一个选定的值为条件返回第二个下拉框中的内容,用js中的createElement()创建,并利用appendChild()来添加进父标签.出现意外:每次 ...

  7. angularjs中向html页面添加内容节点元素代码段的两种方法

    第一种方式:原生JS向html页面添加内容节点元素代码段: <!DOCTYPE html> <html> <head> <meta charset=" ...

  8. 原创:js代码, 让dedecms支持Tag选择, 添加内容更为方便,不用手输Tag

    dedecms在编辑修改内容时,TAG标签需要手动输,中文的Tag, 中间还得用半角字符','分隔,  输入法切来切去很不方便,   于是动手改后台代码, 利用后台的tags_main.php, 让d ...

  9. js清除节点内容（改变标签元素）

    <!DOCTYPE HTML><html> <head>        <meta http-equiv="Content-Type" c ...

随机推荐

  1. centos7安装Hive及其问题解决

    本地如何安装hive (安装hive之前需要安装hadoop并启动hadoop的相关集群,mysql数据库) hadoop集群是两台,一台作为master,两台作为slaver,mysql单独占用一台 ...

  2. Flink 反压 浅入浅出

    前言 微信搜[Java3y]关注这个朴实无华的男人,点赞关注是对我最大的支持! 文本已收录至我的GitHub:https://github.com/ZhongFuCheng3y/3y,有300多篇原创 ...

  3. 如何在Ubuntu Server 18.04 LTS中配置静态IP地址

    安装Ubuntu Server 18.04后需要分配一个的静态IP地址.先前的LTS版本Ubuntu 16.04使用/etc/network/interfaces文件配置静态IP地址,但是Ubuntu ...

  4. 用Python写个开心消消乐小游戏

    本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理 提到开心消消乐这款小游戏,相信大家都不陌生,其曾在 2015 年获得过玩家最喜爱的移动单机游戏奖,受 ...

  5. java基础:switch语句应用,循环的详细介绍以及使用,附练习案列

    1. switch语句 1.1 分支语句switch语句 格式 switch (表达式) { case 1: 语句体1; break; case 2: 语句体2; break; ... default ...

  6. Mongodb分布式集群副本集+分片

    目录 简介 1. 副本集 1.1 MongoDB选举的原理 1.2 复制过程 2. 分片技术 2.1 角色 2.2 分片的片键 2.3 片键分类 环境介绍 1.获取软件包 2.创建路由.配置.分片等的 ...

  7. Flutter ListTile - Flutter每周一组件

    该文章属于[Flutter每周一组件]系列,其它组件可以查看该系列下的文章,该系列会不间断更新:所有组件的demo已经上传值Github: https://github.com/xj124456/fl ...

  8. CentOS7离线安装mysql5.6

    下载mysql5.6,系统选择redhat,版本选择RHEL7,下载RPM Bundle后得到一个tar文件.这里得到文件MySQL-5.6.44-1.el7.x86_64.rpm-bundle.ta ...

  9. VIM和正则表达式

    1.VIM 1.1vim简介 vim是一款强大的文本编辑器,它和 vi 使用方法一致,但功能更为强大.官网:www.vim.org.中文手册:http://vimcdoc.sourceforge.ne ...

  10. hive on spark：return code 30041 Failed to create Spark client for Spark session原因分析及解决方案探寻

    最近在Hive中使用Spark引擎进行执行时(set hive.execution.engine=spark),经常遇到return code 30041的报错,为了深入探究其原因,阅读了官方issu ...