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. C# INotifyPropertyChanged

    INotifyPropertyChanged 向客户端发出某一属性值已更改的通知. namespace System.ComponentModel{ // Summary: // Notifies c ...

  2. linux命令：touch

    1:命令介绍: touch用来创建文件或修改文件和目录的时间戳,包括存取时间和更改时间. 2:命令格式: touch [选项] 文件 3:命令参数: -a   或--time=atime或--time ...

  3. 破解 keyme2程序（固定明码比较）

    系统 : Windows xp 程序 : keyme2 程序下载地址 :http://pan.baidu.com/s/1pKqlHiF 要求 : 找出序列号 使用工具 : IDA Pro & ...

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

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

  5. magento产品成功添加到购物车后跳转到不同页面 添加 add to cart 按钮

    1 添加产品到购物车成功后是跳转到购物车页面或不跳转.这个在后台可以设置 system -> configuration -> After Adding a Product Redirec ...

  6. 第二个Sprint冲刺第八天

    讨论地点:宿舍 讨论成员:邵家文.李新.朱浩龙.陈俊金 工作:更新了主界面

  7. 深度理解Key-Value Observing 键值观察

    前言   在上一阶段的开发过程中,我们大量使用了 KVO 机制,来确保页面信息的及时同步.也因此碰到了很多问题,促使我们去进一步学习 KVO 的相关机制,再到寻找更好的解决方案.鉴于 KVO 让人欲仙 ...

  8. Core Java Volume I — 5.1. Classes, Superclasses, and Subclasses

    5.1. Classes, Superclasses, and SubclassesLet's return to the Employee class that we discussed in th ...

  9. UI学习笔记---第十四天数据持久化

    一.沙盒机制 每个应用程序位于文件系统的严格限制部分 每个应用程序只能在为该程序创建的文件系统中读取文件 每个应用程序在iOS系统内斗放在了统一的文件夹目录下 沙盘路径的位置 1. 通过Finder查 ...

  10. Map/Reduce的类体系架构

    Map/Reduce的类体系架构 Map/Reduce案例解析: 先以简单的WordCount例程, 来讲解如何去描述Map/Reduce任务. public static void main(Str ...