一、Dom属性

　　1.1 设置属性(setAttribute)

　　设置某个标签的属性，setAttribute(key,value)　

<body>

    <div>

        <input id="i1" type="text">

    </div>

</body>

　　设置value属性：　

var obj = document.getElementById("i1")

obj.setAttribute("value", "输入关键字")

　　1.2 删除属性，removeAttribute(key)　

obj.setAttribute("value", "输入关键字")

obj.removeAttribute('value')  // 删除属性

　　1.3 获取所有属性(attributes)　　

obj.attributes

NamedNodeMap {0: id, 1: type, id: id, type: type, length: 2}

　　1.4 获取某个属性(getAttribute)　

obj.getAttribute('type')

"text　

二、创建标签

　　2.1 字符串形式

　　把需要添加的标签，直接以字符串形式写入　　

<body>

    <div>

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

    </div>

    <div id="i1">

        <input type="text" />

        <br />

    </div>

    <script>

        function addEle() {

            var add_tag = "<p><input type='text' /></p>"; // 创建一个标签

            var tag = document.getElementById('i1');

            tag.insertAdjacentHTML("beforeEnd", add_tag);  // 把标签添加到i1中

        }

    </script>

</body>

　　效果，点击“+”增加输入框：

　　

　　注：insertAdjacentHTML，第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'，他们分别指的什么，如图：

　　

　　2.2 对象方式添加

<body>

    <div>

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

    </div>

    <div id="i1">

        <input type="text" />

        <br />

    </div>

    <script>

        function addEle() {

            var add_tag = document.createElement("input"); //创建input标签

            add_tag.setAttribute('type', 'text'); //为input标签添加属性

            add_tag.style.fontSize = '16px'; //为input标签增加样式

            add_tag.style.color = 'red';

            var p_tag = document.createElement('p'); //创建p标签

            p_tag.appendChild(add_tag); // 将input标签添加到p标签中

            var tag = document.getElementById('i1');

            tag.appendChild(p_tag); // 将p标签添加到i1中

        }

    </script>

</body>

　　效果如下：

　　

Dom--属性以及创建标签的更多相关文章

  1. JS-DOM ～ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性

    带有Element和不带的区别 a)  带Element的获取的是元素节点 b)  不带可能获取文本节点和属性节点 获取所以子节点 a)   . childNodes b)   . children ...

  2. 创建标签等操作DOM的原生js API

    ()创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点 ...

  3. 使用script创建标签添加属性值和添加样式

    <mark>使用script创建标签和给标签属性值以及样式的方法</mark><script> window.onload=function(){ var btn= ...

  4. DOM – (w3school)1.DOM 方法 + 2.DOM属性 + 3.DOM 元素

      1.DOM 方法   一些 DOM 对象方法 这里提供一些您将在本教程中学到的常用方法: 方法 描述 getElementById() 返回带有指定 ID 的元素. getElementsByTa ...

  5. JavaScript 节点操作Dom属性和方法(转)

    JavaScript 节点操作Dom属性和方法   一些常用的dom属性和方法,列出来作为手册用. 属性:   1.Attributes 存储节点的属性列表(只读)   2.childNodes 存储 ...

  6. 6、前端--DOM操作（查找标签、节点操作、获取值操作、class操作、样式操作、绑定事件、内置参数this）

    DOM操作之查找标签 前缀关键字>>>:document # 基本查找(核心) document.getElementById 根据ID获取一个标签 document.getElem ...

  7. js创建标签的方法--依赖于jquery

    /** * 创建标签,传入一个对象,返回一个完整的标签 * @param {Object.attribute} tag 标签 * @param {Object.attribute} attribute ...

  8. Dom属性方法

    一.javascript的三大核心 1.ECMAScript js的语法标准 2.DOM Document object Model 文档对象模型,提供的方法可以让js操作html标签 3.BOM B ...

  9. 创建标签的两种方法insertAdjacentHTML 和 createElement 创建标签 setAttribute 赋予标签类型 appendChild 插入标签

    1. 建立字符串和insertAdjacentHTML('beforeEnd', ) 2. 通过createElement 创建标签  setAttribute 赋予标签类型 appendChild ...

随机推荐

  1. Linux内核分析作业第八周

    进程的切换和系统的一般执行过程 一.进程调度的时机 中断处理过程(包括时钟中断.I/O中断.系统调用和异常)中,直接调用schedule(),或者返回用户态时根据need_resched标记调用sch ...

  2. 使用phpstudy创建本地虚拟主机

    在使用php开发网站的时候,每次测试自己的网站时,通常都是用localhost/dirname/filename.php来访问自己所写的程序 但是有时候我们需要模拟真实的场景,如通过域名访问时,如果你 ...

  3. Install Jetty web server on CentOS 7 / RHEL 7

    http://www.eclipse.org/jetty/download.html http://www.eclipse.org/jetty/documentation/current/startu ...

  4. ORA-01654 ： 表空间不足

    参考: Oracle表空间不足ORA-01654 查看表空间和表的使用率 ORA-01654 索引 无法通过 表空间扩展 Oracle 查看表空间的大小及使用情况sql语句 一.基础查询 1.查看表空 ...

  5. 关于python性能相关测试cProfile库

    http://blog.csdn.net/gzlaiyonghao/article/details/1483728 收藏一个大神对这个问题的介绍. 我就不多做污染了.另外还有两个 增强库可以针对cPr ...

  6. 《spark快速大数据分析》

    第一 概论 1.spark的特点 适用多种不同分布式平台的场景,包括批处理,迭代算法,交互式查询,流处理: spark提供了python,scale,java等接口 2.spark的组件 spark的 ...

  7. jquery 動畫

    animate({param},speed,callback)/animate({param},speed)/animate({param}) param表示css屬性:屬性名必須是camel標識法: ...

  8. spring cloud实战与思考（四） JWT之Token主动失效

    需求: JWT泄露.密码重置等场景下,需要将未过期但是已经不安全的JWT主动失效. 本文不再复述JWT的基础知识,不了解的小伙伴可以自行Google一下.这里主要是针对以上需求聊一聊解决方案.如果服务 ...

  9. python之Oracle操作(cx_Oracle)

    python可通过使用cx_Oracle模块对Oracle数据库进行操作.首先,需要下载cx_Oracle模块,下载地址:https://pypi.python.org/pypi/cx_Oracle/ ...

  10. bzoj 2120 数颜色 (带修莫队）

    题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=2120 题意:两种操作:Q 询问区间  l - r  内颜色的种类 ,R 单点修改 思路 ...