一、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. 结对编程 学习手记ver1.2

        团队成员: 226 高雅智 164刘浩然: 一 结对编程 辛辛苦苦搞了好久的时间,就是没有人家的快,明明算法都差不多,哎~~~ 结对的优势,在于双方互相督促,对于代码能贡献自己的能力,人多力量 ...

  2. Pair Project 1 elevator

    结对编程——电梯调度 12061181 高孟烨 12061182 郝倩 1.结对编程的优缺点: 优点:结对编程可以结合两个人各自擅长之地,充分发挥两个人各自的优势,两个人一起合作效率会更高.一份工作两 ...

  3. Oracle系列(一)： Oracle数据恢复

     Oracle数据恢复 在使用Oracle的时候,突然一部小心update或者delete全部数据后怎么办? select * from table as of timestamp to_timest ...

  4. 20150421 作业5 四则运算 测试与封装 5.1 5.2(doing)

    结伴队友:王佳寧,他的博客地址:http://www.cnblogs.com/paopaotai/ 5.2 黑白盒測試 測試項目名稱 黑盒測試 測試人員 葉子鵬&王佳寧 測試編號 測試頁面 測 ...

  5. Raphaël - JavaScript Vector Library

    Raphaël http://dmitrybaranovskiy.github.io/raphael/ // ┌──────────────────────────────────────────── ...

  6. Difference between prop and attr in different version of jquery

    jQuery <1.9$('#inputId').attr('readonly', true); jQuery 1.9+$('#inputId').prop('readonly', true); ...

  7. using 的三种使用方式

    using 关键字有两个主要用途: 作为指令:用于为命名空间创建别名或导入在其他命名空间中定义的类型. 作为语句:用于定义一个范围,在此范围的末尾将释放对象. 此外,使用 using 静态指令可定义一 ...

  8. spring学习总结(一)_Ioc基础(中)

    本篇文章继续上篇文章讲解Ioc基础,这篇文章主要介绍使用spring注解配置Ioc 上篇文章主要是通过xml配置文件进行Ioc的配置.这次进行改造下,通过注解进行配置 首先先看一个简单的demo 简单 ...

  9. Linux、Debian、Jenkins、GIT、Nginx、码云安装，自动化部署前后端分离项目

    1.安装Jenkins i:下载Jenkins安装包(war文件):https://jenkins.io/download/ ii:这里采用Tomcat的war包方式安装,讲下载好的安装包放到Tomc ...

  10. face parsing

    主页:https://www.sifeiliu.net/project 基于CNN face parsing: https://www.sifeiliu.net/face-parsing codes: ...