dom操作：THML新增子标签 a标签(appendChild)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签操作</title>
</head>
<body>
    <!--定义一个div标签和一个a标签-->
    <div id="container">
        <div>武功秘籍</div>
        <div>家常菜谱</div>
    </div>
    <a href="http://www.baidu.com" onclick="return AddEle();">添加</a>

    <script type="text/javascript">
        function AddEle(){
//            创建标签,并给标签定义属性和值
            var obj = document.createElement('a');
            obj.href = 'http://www.baidu.com';
            obj.innerText = '如来神掌';
//              设置新标签写入的位置
            var container = document.getElementById('container');
//                在指定标签位置写入新标签
            container.appendChild(obj);
            return false;
        }

    </script>

</body>
</html>

　　效果图：

　　Dom操作：HTML新增子标签--指定子标签插入位置a标签（insertBefor）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>标签操作</title>

</head>

<body>

    <!--定义一个div标签和一个a标签-->

    <div id="container">

        <div>武功秘籍</div>

        <div>家常菜谱</div>

    </div>

    <a href="http://www.baidu.com" onclick="return AddEle();">添加</a>

    <script type="text/javascript">

        function AddEle(){

//            创建标签,并给标签定义属性和值

            var obj = document.createElement('a');

            obj.href = 'http://www.baidu.com';

            obj.innerText = '如来神掌';

//              设置新标签写入的位置

            var container = document.getElementById('container');

//                在指定标签位置写入新标签

            container.appendChild(obj);

            container.insertBefore(obj,container.firstChild);

            return false;

        }

    </script>

</body>

</html>

　　

Dom之标签增删操作的更多相关文章

  1. Dom,查找标签和操作标签

    Dom,查找标签和操作标签 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式 ...

  2. javascript select标签的操作

    用原生的方法对select标签的增删操作 1.选中某一个option,一般采用 option[i].selected  = true 2.添加option首先需要创建一个option的节点,然后插入到 ...

  3. JavaScript基础DOM介绍和常用操作（5）

    day53 参考:https://www.cnblogs.com/liwenzhou/p/8011504.html JavaScript引入方式 location对象 window.location ...

  4. php配合jquery实现增删操作

    后台使用php,前台引用jquery,实现增删操作,代码如下: <script type="text/javascript" src="http://keleyi. ...

  5. 使用Dom解析器，操作XML里面的信息

    import java.io.FileNotFoundException;import java.io.FileOutputStream;import java.io.IOException;impo ...

  6. js倒计时函数和(js禁用和恢复a标签的操作)

    <script type="text/javascript"> /*获取手机号*/ var start_time=60; function get_phone_nums ...

  7. HTML DOM元素关系与操作

    <html> <head><title>DOM元素关系与操作</title></head> <body> <!-- div ...

  8. jquery的radio和checkbox的标签的操作集合

    jquery的radio和checkbox的标签的操作集合: $("input[name='radio_name'][checked]").val(); //选择被选中Radio的 ...

  9. DOM的查找与操作

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

随机推荐

  1. swift初识

    介绍: Swift是苹果2014年推出的全新编程语言,它继承了C语言.ObjC的特性,且克服了C语言的兼容性问题.Swift发展过程不仅保留了Objc很多语言特性,他也借鉴了多种现代化语言的特点,在其 ...

  2. 触控(Touch) 、 布局(Layout)

    1 使用触控实现一个简易的画板 1.1 问题 触控(Touch)是一个UITouch类型的对象,当用户触摸了屏幕上的视图时自动被创建,通常使用触控实现绘图.涂鸦.手写等功能.本案例使用触控实现一个简易 ...

  3. C语言----变量及作用域 、 指针 、 指针和数组 、 进程空间 、 字符串

    1 使用程序来模拟放球.取球的问题 1.1 问题 栈是一种特殊的线性表,它的逻辑结构和线性表相同,只是其运算规则较线性表有更多的限制,故又称为运算受限的线性表. 栈的定义是限制仅在表的一端进行插入和删 ...

  4. libvirtError: no connection driver available for qemu:///system 解决办法

    今天部署了一套K版的OpenStack环境后,启动nova-compute后,日志里狂报如下错误(因为其内部有定时任务需要去连libvirtd进程): 2015-08-14 10:01:00.061 ...

  5. Sharded实现学习-我们到底能走多远系列（32）

    我们到底能走多远系列(32) 扯淡: 工作是容易的赚钱是困难的 恋爱是容易的成家是困难的 相爱是容易的相处是困难的 决定是容易的可是等待是困难的 主题: 1,Sharded的实现    Sharded ...

  6. 搭建 hexo，在执行 hexo deploy 后,出现 error deployer not found:github 的错误

    hexo 更新到3.0之后,deploy的type 的github需要改成git 改了之后执行npm install hexo-deployer-git --save 然后再部署试试 官网说明: ht ...

  7. centos6.4搭建knowlededgeroot-1.0.4知识库平台

    知识库平台选择 http://www.oschina.net/project/tag/320/pkm 最近接到一个任务,要求搭建一个用于部门内部业务知识规范管理和共享的平台,目的是把部门内的FAQ知识 ...

  8. ajax 上传

    使用FormData,进行Ajax请求并上传文件:具体代码如下: html代码: <!DOCTYPE html><html lang="en"><he ...

  9. Selenium WebDriver对cookie进行处理绕过登录验证码

    现在几乎所有登录页面都会带一个验证码,做起自动化这块比较麻烦, 所以要绕过网站的验证码. 首先需要手动登录一次你的测试网站,去chrome的F12里获取这个网站的cookie信息,找到对应的保存登录信 ...

  10. 颜色追踪块CamShift---33

    原创博客:转载请标明出处:http://www.cnblogs.com/zxouxuewei/ 颜色追踪块CamShift滤波器. 首先确保你的kinect驱动或者uvc相机驱动能正常启动:(如果你使 ...