一、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基础实践一

    [chmod 命令] chmod命令是非常重要的,用于改变文件或目录的访问权限.用户用它控制文件或目录的访问权限. 该命令有两种用法.一种是包含字母和操作符表达式的文字设定法:另一种是包含数字的数字设 ...

  2. Linux内核第七节 20135332武西垚

    预处理.编译.链接和目标文件的格式 可执行程序是怎么得来的 以C语言为例,c代码经过编译器的预处理,编译成汇编代码,由汇编器编译成目标代码,再链接成可执行文件,由操作系统加载到cpu里来执行. (截图 ...

  3. CSS响应式网站开发

    <html> <head> //当设备屏幕最大宽度小于1024px时加载如下CSS内容 @media screen and (max-width: 1024px){       ...

  4. Jfrog Artifactory jenkins 流水线使用docker的方式培训[暂未成功]

    1. 创建jenkins的流水线 2. 创建artifactory的镜像仓库 3. 创建generic的仓库上传需要的 war包还有tar包. 4. 修改pipeline的 脚本 主要修改的地方. 修 ...

  5. GS使用HTTPS登录的设置过程

    1. Windows 增加角色服务 服务器配置管理器, 添加角色服务 增加角色功能里面有: 证书颁发机构 证书颁发机构 web注册 2. AD CS配置 主要是next操作 独立ca 根证书 等 3. ...

  6. Angular $location获取端口号

    <!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta ...

  7. Wireshark协议分析工具应用

    一.Wireshark简介与安装 Wireshark(前称Ethereal)是一个网络封包分析软件.网络封包分析软件的功能是撷取网络封包,并尽可能显示出最为详细的网络封包资料.Wireshark使用W ...

  8. datatime

    /把一个日期字符串如“2007-2-28 10:18:30”转换为Date对象 var   strArray=str.split("   "); var   strDate=str ...

  9. Linux常用指令-ssh

    目录 ssh远程登陆 ssh免密码登陆 生成公钥和私钥 将公钥复制到其他从机 文件说明 id_rsa id_rsa.pub authorized_keys known_host SSH(远程连接工具) ...

  10. python threading模块使用 以及python多线程操作的实践(使用Queue队列模块)

    今天花了近乎一天的时间研究python关于多线程的问题,查看了大量源码 自己也实践了一个生产消费者模型,所以把一天的收获总结一下. 由于GIL(Global Interpreter Lock)锁的关系 ...