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. 【大胃王】2013暴食女王巅峰战（安吉拉x三宅x正司x木下）熟肉+高能

    一边说着“不可以还没试就先放弃”,一边认真吃饭的女生真的让人抵抗不了啊. http://www.bilibili.com/video/av2395980/

  2. 简单模仿javascript confirm方法的例子

    页面中有个删除按钮: <?php $i = 1; foreach ($packages as $package) { ?> <tr> <td height="3 ...

  3. 常用的php字符串处理函数

    php常用的字符串处理函数 1.trim():从字符串的两端删除空白字符和其他预定义字符 ltrim():从字符串的左端删除空格和其他预定义字符 rtrim():从字符串的末端开始删除空白字符和其他预 ...

  4. Struts2 OGNL使用详解（转）

    OGNL OGNL ( Object Graph Navigation Language ),对象图导航语言.这是一种强大的表达式语言,通过它可以非常方便的来操作对象属性. 在 Struts2 中,O ...

  5. Evaluate Reverse Polish Notation

    Evaluate the value of an arithmetic expression in Reverse Polish Notation. Valid operators are +, -, ...

  6. sdut 2153 Clockwise (2010年山东省第一届ACM大学生程序设计竞赛)

    题目大意: n个点,第i个点和第i+1个点可以构成向量,问最少删除多少个点可以让构成的向量顺时针旋转或者逆时针旋转. 分析: dp很好想,dp[j][i]表示以向量ji(第j个点到第i个点构成的向量) ...

  7. ~0u >> 1

    ~ 逐位求反u 后辍为 定义unsigned类型>>右移如在32系统中,连起来就是 将32位的0取反后 右移一位.也就是 int 的最大值 2147482347

  8. Android中GC_EXTERNAL_ALLOC的含义

    GC_FOR_MALLOC means that the GC was triggered because there wasn't enough memory left on the heap to ...

  9. Java-->IO流模拟实现用户登录以及登录信息

    --> Test 测试类 package com.dragon.java.hwlogin; import java.io.FileNotFoundException; import java.u ...

  10. poj 3468 线段树区间更新/查询

    Description You have N integers, A1, A2, ... , AN. You need to deal with two kinds of operations. On ...