一、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. 个人博客作业Week7（阅读文章，心得体会）

    Alpha阶段结束了,内心可以说是五味杂陈.不是说我们的产品拿不上台面那般差劲,复杂的心绪主要来源于和别的队的比较,别的队才刚刚发布没多久访问量和注册量就破百了,并且还发起了找bug送红包的活动.可能 ...

  2. Linux内核分析——第五章 系统调用

    第五章 系统调用 5.1 与内核通信 1.系统调用在用户空间进程和硬件设备之间添加了一个中间层,该层主要作用有三个: (1)为用户空间提供了一种硬件的抽象接口 (2)系统调用保证了系统的稳定和安全 ( ...

  3. Cocos2d-x项目创建方式

    刚接触cocos2d-x的时候,还只有2.x版本,尝试着将cocos2d-x项目创建功能加入到vs里面去,后来,引擎用Python封装好了好多个脚本文件,其中就包括create_project.py文 ...

  4. HanderBar

    对于java开发,涉及到页面展示时,比较主流的有两种解决方案: 1. struts2+vo+el表达式. 这种方式,重点不在于struts2,而是vo和el表达式,其基本思想是:根据页面需要的信息,构 ...

  5. 后端返回值以json的格式返回，前端以json格式接收

    以随便一个类为例子:这个例子是查询企业主营类别前5事项 一.以json数组的格式返回到前端中 (1)后端将结果绑定到param中,然后将结果以为json数组的格式返回到前端 /** * 查询企业主营类 ...

  6. 在-for 循环里面如何利用ref 操作dom

    由于dom 元素是在渲染之后才能操作,所以如果想取到dom元素,要放到mounted()这个生命周期函数里面,并且还要用this.$nextTick(function () {})

  7. MySQL基础~~编程语法

    常量 数值 字符串:单引号或者双引号括起来.包括普通字符串或者日期格式的字符串. 布尔值:false(FALSE)对应数字值为0.true(TRUE)对应数字值为1. NULL:可以参考http:// ...

  8. 转帖: 一份超全超详细的 ADB 用法大全

    增加一句 连接 网易mumu模拟器的方法 adb  connect 127.0.0.1:7555 一份超全超详细的 ADB 用法大全 2016年08月28日 10:49:41 阅读数:35890 原文 ...

  9. python 协程库gevent学习--源码学习(一)

    总算还是要来梳理一下这几天深入研究之后学习到的东西了. 这几天一直在看以前跟jd对接的项目写的那个gevent代码.为了查错,基本上深入浅出了一次gevent几个重要部件的实现和其工作的原理. 这里用 ...

  10. html5 视频和音频

    视频:html5支持视屏文件或者视屏流. html5使用video元素来播放视屏,支持的类型有OGG,MEPG 4,webM,但是不同的浏览器支持类型不同. src可以放置视屏文件的路径,可以使用元素 ...