一、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. M2事后总结

    照片     设想和目标 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? "北航"Clubs旨在于解决北航校内社团管理与学生参与社团活动的困难的 ...

  2. 《蹭课神器》Alpha版使用说明

    <蹭课神器>是一款方便大学生蹭课的软件,目前实现了查询课表的功能,还没有实现搜索和提醒的功能.有待进一步的开发! 登录之后点击查询操作,查询课表. 课表显示如下

  3. selective search

    1.引言:图像的物体识别主要有两个步骤:定位.分类.在分类的过程中,需要对图像中文物体的区域划分出来.传统的方法是利用滑窗,一个窗口一个窗口得选择,将之与目标进行比较,确定物体的位置. 为了降低搜索空 ...

  4. python语言几个常见函数的使用

    写代码,有如下变量,请按照要求实现每个功能: name = " Kobe Bean Bryant" a. 移除 name 变量对应的值左边的空格,并输出移除后的内容 name = ...

  5. HTML使用button的一个小坑

    https://www.w3schools.com/TAGs/att_button_type.asp Definition and Usage The type attribute specifies ...

  6. JavaScript 模拟 HashMap例子

    function map(){    var map = {}; // Map map = new HashMap();        var key = "key";    va ...

  7. java基础知识点罗列

    1:Java泛型 2:clone Java中的深拷贝(深复制)和浅拷贝(浅复制)   Java中对Clone的理解  序列化和反序列化的概念 3:Java中有关Null的9件事

  8. 传输层中的协议 TCP & UDP

    面向连接的TCP协议 “面向连接”就是在正式通信前必须要与对方建立起连接.比如你给别人打电话,必须等线路接通了.对方拿起话筒才能相互通话.TCP(Transmission Control Protoc ...

  9. WMS与MES集成

    ERP的物流管理只偏重于帐务的管理,对现场实物流的及时性和精细程度管理均不够,无法满足企业日益精细化管理的需求,WMS可以弥补这个缺陷,WMS采用条码技术及时反应物流过程中的变化,同时将存量细化到货架 ...

  10. loadrunner基础学习笔记三

    运行时设置: 打开运行时设置:任务窗格中-选择回放-点击运行时设置按钮  1 重复执行次数:=2 2 步:控制迭代时间间隔 3 日志设置:指出要在运行测试期间记录的信息量 4 思考时间:可以在cont ...