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. PHP中目录的操作

    文件的操作:创建文件,删除文件,重命名文件rename(),移动/复制文件,读取,大小(PHP都有内置的函数) 目录的操作:创建目录(有),删除目录,复制目录,统计目录大小,遍历(自己定义函数) 一. ...

  2. Redis - 介绍及安装

    Redis属于key-value数据库,与传统的数据库存在很大区别,Redis以命令的方式代替了复杂的SQL语句,并且属于内存库性质,所以运行速度非常快.内存数据会生成数据库文件保证数据持久化. Re ...

  3. PHP 防范xss攻击

    XSS 全称为 Cross Site Scripting,用户在表单中有意或无意输入一些恶意字符,从而破坏页面的表现! 看看常见的恶意字符XSS 输入: 1.XSS 输入通常包含 JavaScript ...

  4. java学习第十天

    第十二次课 目标 一维数组(创建访问) 一.概念与特点 1.概念 相同数据类型的有序集合[] 数组名: 容器的名字 元素:  下标变量,数组名[下标] 长度:  length 下标:   位置.索引  ...

  5. Autoresizing和AutoLayout

    1 使用Autoresizing的方式进行界面布局 1.1 问题 Autoresizing是IOS旧版的自动布局技术,现在仍然被很多企业使用.本案例将学习如何使用Autoresizing完成界面的布局 ...

  6. Spring 框架获取 datasource对象的方法

    1,使用org.springframework.jdbc.datasource.DriverManagerDataSource  2.使用org.apache.commons.dbcp.BasicDa ...

  7. 209. Minimum Size Subarray Sum

    Given an array of n positive integers and a positive integer s, find the minimal length of a subarra ...

  8. 345. Reverse Vowels of a String

    Write a function that takes a string as input and reverse only the vowels of a string. Example 1:Giv ...

  9. 来一场说走就走的骑行---23KM的上班探路行动圆满结束

    上午带着宝贝在游乐场疯了2小时,回家吃过中午饭,收拾利落,刚上刚拾掇利落的单车,出发,目的地:公司.预测距离22.5KM目的    1 锻炼身体,变每天上下班的娱乐时间为锻炼时间.    2 省钱(其 ...

  10. 放课后的约定 by：S_H_Y

    题目背景 十年.十年前.天空的蔚蓝,云彩的舒软.我,怎么会认识你.洁白的,洁白的,十年前.我无法忘却.终究是小时候的约定.记忆被困在冻土里,有时我不认识那天的我.难道一切,都锁在心里面了吗? 题目描述 ...