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. DB other operation

    A prepared statement is a feature used to execute the same/similar SQL statement repeatedlly with hi ...

  2. codeforces round367 div2.C (DP)

    题目链接:http://codeforces.com/contest/706/problem/C #include<bits/stdc++.h> using namespace std; ...

  3. Android crash特殊位置定位

    本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 通常情况下,在我们开发的过程中遇到的crash,可以到logcat中找原因:如果做定制App,对方用 ...

  4. Objective-C对象初始化 、 实例方法和参数 、 类方法 、 工厂方法 、 单例模式

    1 重构Point2类 1.1 问题 本案例使用初始化方法重构Point2类,类中有横坐标x.纵坐标y两个属性,并且有一个能显示位置show方法.在主程序中创建两个Point2类的对象,设置其横纵坐标 ...

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

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

  6. Fix VNC Desktop Sharing on Ubuntu Desktop 14.04

    Solution 1 sudo apt-get -y install dconf-tools dconf write /org/gnome/desktop/remote-access/require- ...

  7. 【avalon源码】

    1. document.getElementsByTagName('head')[0] document.head 2. 3. var IEVersion = NaN if (window.VBArr ...

  8. 【题解】【数组】【Prefix Sums】【Codility】Genomic Range Query

    A non-empty zero-indexed string S is given. String S consists of N characters from the set of upper- ...

  9. Open vSwitch FAQ (三)

    Quality of Service (QoS) Q: How do I configure Quality of Service (QoS)? A: Suppose that you want to ...

  10. suse linux修改hostname

    SUSELinux中修改hostname需要修改以下两个文件 $vi /etc/HOSTNAME $vi /etc/hosts 然后重启系统即可.