<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <input type="button" onclick="AddEle1();" value="+++">

    <input type="button" onclick="AddEle2();" value="+++2">

    <div id="i1">

    <input type="text"/>

        <hr/>

    </div>

    <script>

        function AddEle1() {

//            创建一个标签，将标签添加到指定标签里面

            var tag="<p><input type='text'/></p> ";

            document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);

//            四个参数beforeBegin、 afterBegin、beforeEnd、afterEnd

        }

        function AddEle2() {

//            创建一个标签，将标签添加到指定标签里面

            var tag=document.createElement('input');

            tag.setAttribute('type','text');

            tag.style.fontSize='19px';

            tag.style.color='red';

            var p =document.createElement('p');

            p.appendChild(tag)

            document.getElementById('i1').appendChild(p)

        }

    </script>

</body>

</html>

　　

使用JS增加标签的更多相关文章

  1. JS添加标签效果

    JS添加标签效果 在豆瓣网上添加自己的标签是一种常见的效果,今天也就做了一个简单的demo.由于时间的问题 我不多原理,大家可以试着操作几遍就能明白其中的原理了. JSFiddle的效果如下: 点击我 ...

  2. JS修改标签中的文本且不影响其中标签

    /********************************************************************* * JS修改标签中的文本且不影响其中标签 * 说明: * ...

  3. js 中标签的增删 方法

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. js增加收藏

    <html> <span style="white-space:pre"> </span><head> <span style ...

  5. js 父子标签同时设置onclick，子标签触发父标签onclick解决办法

    js 父子标签同时设置onclick,子标签触发父标签onclick 或 子标签为a 先触发onclick 再触发 a 的 href: 解决方案:在子标签的onclick里写 var ev = win ...

  6. JS获取标签内容的方法

    JS获取标签内容的方法 测试代码 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  7. html页面中插入html的标签,JS控制标签属性

    html页面中插入html的标签 方法1: 使用标签: <textara> </textara>标签 方法2: 使用JS: document.getElementById(&q ...

  8. 1kb 的 placeholder.js 增加 img 标签使用方式

    预览 官方网站示例. 项目 github 地址 使用 引入 placeholder.js 到你的前段代码中: <script src="placeholder.js"> ...

  9. 原生js文字标签云上下滚动播放

    效果:http://hovertree.com/texiao/js/25/ 效果图: 代码如下: <!DOCTYPE html> <html> <head>< ...

随机推荐

  1. hdu 3572 : Task Schedule （网络流）

    题目链接 题意: 有M个机器,N个任务 对第i个任务,需要在[Si,Ei]这段时间内恰有Pi天被process 每天最多有M个机器同时工作 每一天,一个任务若被process,那么它恰占用一个机器. ...

  2. 【leetcode】1169. Invalid Transactions

    题目如下: A transaction is possibly invalid if: the amount exceeds $1000, or; if it occurs within (and i ...

  3. 小程序-登录-token

    1.前端调用wx.login()获取code值 2.前端通过调用wx.getUserInfo获取iv.rawData.signature.encryptedData等加密数据,传递给后端 3.服务器通 ...

  4. HTML5的新特性：范围样式，又叫做<style scoped>

    Chromium 最近实现了一个HTML5的新特性:范围样式,又叫做<style scoped> .开发者可以通过为根元素设定一个添加了scoped属性的style标签,来限制样式只作用于 ...

  5. Oracle的优化

    Oracle优化:物理优化和逻辑优化.物理优化:1):Oracle的运行环境.2):合理的使用优化器.3):合理配置Oracle实例参数4):建立合适的索引(减少IO)5):将索引数据和表数据分开在不 ...

  6. Web 与 Node 基础

    浏览器端发送请求(browser) 浏览器或者模拟发送 http 请求端 服务端处理请求(web) 服务器(使用 node ) 2.1. 使用 Forever 管理程序 2.2. 可以使用 PM2 代 ...

  7. C++新旧类型转换小记

    旧式类型转换可应对一切转换,不管合不合理,有没有风险,你让我转我就转给你,后果自负. 新式类型转换比较安全,主要体现在父子类之间的运行时转换 dynamic_cast上,若转换失败则返回空指针,而旧式 ...

  8. React Native商城项目实战14 - 首页中间下部分

    1.MiddleBottomView.js /** * 首页中间下部分 */ import React, { Component } from 'react'; import { AppRegistr ...

  9. 【洛谷P2239 螺旋矩阵】

    题目链接 直接看题 一看就很数学 我们不妨来画图 画出几个矩阵,找他们的关系 然后发现 当i==1时,对应的值就是j所对应的值: 当i==n时,所对应的值就是3*n-2-j+1: 当j==1时,所对应 ...

  10. Vue引入Jquery和Bootstrap

    一.引入jquery包 npm i jquery 二.配置jquery 在webpack.base.conf.js中加载juery插件  所以要配置该文件 三.引入Bootstrap npm i bo ...