js追加元素

直接运行

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>js中常用追加元素的几种方法</title>
        <link rel="stylesheet" href="css/rest.css" />
        <style>
            .container {
                width: 1200px;
                padding: 10px;
                margin: 50px auto;
                border: 1px solid lightcoral;
            }
            #wrap{
                border: 1px solid lightseagreen;
            }
            .container p{
                height: 30px;
                line-height: 30px;
            }
            .btn-group{
                margin-top: 20px;
            }
            button{
                width: 80px;
                height: 32px;
                margin-right: 10px;
                line-height: 32px;
                text-align: center;
                border: 0px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div id="wrap">
                <p class="first">我是第一个子元素</p>
                <p class="second">我是第二个子元素</p>
            </div>
            <div class="btn-group">
                <button class="append">append</button>
                <button class="appendTo">appendTo</button>
                <button class="prepend">prepend</button>
                <button class="prependTo">prependTo</button>
                <button class="after">after</button>
                <button class="before">before</button>
                <button class="appendChild" onclick="appChild()">appendChild</button>
                <button class="insertAfter">insertAfter</button>
                <button class="insertBefore">insertBefore</button>
            </div>  

        </div>  

    </body>
</html>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    $(function(){
        //append(),在父级最后追加一个子元素
        $(".append").click(function(){
            $("#wrap").append("<p class='three'>我是子元素append</p>");
        });  

        //appendTo(),将子元素追加到父级的最后
        $(".appendTo").click(function(){
            $("<p class='three'>我是子元素appendTo</p>").appendTo($("#wrap"));
        });  

        //prepend(),在父级最前面追加一个子元素
        $(".prepend").click(function(){
            $("#wrap").prepend("<p class='three'>我是子元素prepend</p>");
        });  

        //prependTo(),将子元素追加到父级的最前面
        $(".prependTo").click(function(){
            $("<p class='three'>我是子元素prependTo</p>").prependTo($("#wrap"));
        });  

        //after(),在当前元素之后追加(是同级关系)
        $(".after").click(function(){
            $("#wrap").after("<p class='siblings'>我是同级元素after</p>");
        });  

        //before(),在当前元素之前追加(是同级关系)
        $(".before").click(function(){
            $("#wrap").before("<p class='siblings'>我是同级元素before</p>");
        });  

        //insertAfter(),将元素追加到指定对象的后面(是同级关系)
        $(".insertAfter").click(function(){
            $("<p class='three'>我是同级元素insertAfter</p>").insertAfter($("#wrap"));
        });
        //insertBefore(),将元素追加到指定对象的前面(是同级关系)
        $(".insertBefore").click(function(){
            $("<p class='three'>我是同级元素insertBefore</p>").insertBefore($("#wrap"));
        });
    });   

    //appendChild(),在节点的最后追加子元素
    function appChild(){
            // 创建p节点
            var para=document.createElement("p");
            // 创建文本节点
            var node=document.createTextNode("我是子集appendChild新段落。");
            // 把文本节点添加到p节点里
            para.appendChild(node);  

            // 查找div1
            var element=document.getElementById("wrap");
            // 把p节点添加到div1里
            element.appendChild(para);
    }
</script>

原文地址:https://www.cnblogs.com/userzf/p/10271886.html

时间: 2024-10-13 11:23:18

js追加元素的相关文章

js中常用追加元素的几种方法:append,appendTo,after,before,insertAfter,insertBefore,appendChild

js中常用追加元素的几种方法,点击下面每个按钮,即可查看效果 我是第一个子元素 我是第二个子元素 append appendTo prepend prependTo after before appendChild insertAfter insertBefore

jquery 元素控制(追加元素/追加内容)介绍及应用

一.在元素内部/外部追加元素 append,prepend:添加到子元素 before,after:作为兄弟元素添加 html: <div id="content"> 在我的后面追加一条新闻 </div> js: <script type="text/javascript"> jQuery(function(){ //在元素内部追加内容 $("#content").append(" 姚明退役了...

jquery 元素控制(追加元素/追加内容)

查资料在元素内部/外部追加元素二.在元素的不同位置追加内容三.在元素的开始位置追加内容四.在不同元素的开始位置追加内容等等(使用的bui框架). 一.在元素内部/外部追加元素 append,prepend:添加到子元素 before,after:作为兄弟元素添加 举一个append和after的例子: 1.1.append html js 前台效果 可见是在id标签内新增代码. 1.2.after html同上,js代码如下 效果 同理其他类似. 原文地址:https://www.cnblogs

JS子元素oumouseover触发父元素onmouseout

JavaScript中,父元素包含子元素: 当父级设置onmouseover及onmouseout时,鼠标从父级移入子级,则触发父级的onmouseout后又触发onmouseover:从子级移入父级后再次触发父级的oumouseout后又触发onmouseover.而如果onmouseover内又应用了计时器便会存在较大的问题.下面针对此问题给出解决方案. 首先,在给出解决方案之前,必须先弄清楚几个对象及方法,分别如下: 1.事件对象 2.事件对象相关属性(只针对onmouseover及onm

VBS操作JS网页元素实例

'=========================================================================='' VBScript Source File -- Created with SAPIEN Technologies PrimalScript 4.0'' NAME: '' AUTHOR: Microsoft , Microsoft' DATE : 2014/8/14'' COMMENT: ''==========================

Raphael.js改变元素层叠顺序

Raphael.js 元素(Element)改变层叠顺序,Raphael.js是一个矢量绘图库兼容svg和vml.初学时感觉css的z-index能搞定,结果是不支持,不过矢量绘图符合dom标准.可以改变dom加载顺序实现想要的结果. 1.看Raphael.js API,有关于改变层叠的方法,但只找到两个互换.查看源码发现有改变dom结构的方法. 2.XML DOM appendChild() 方法 移除原有元素插入到新位置.刚开始以为只新增,不移除原有.走了很多弯路,基础不扎实. 3.Raph

js获取元素样式方法

? 1 2 3 4 5 6 7 8 function getStyle(ojb,attr){       if(obj.currentStyle){             return obj.currentStyle[attr];       }         else{            return getComputedStyle(obj,false)[attr];        } } js获取元素样式方法,布布扣,bubuko.com

js对元素属性.内容的操作。定时器。元素的平级,父级,子集关系。

JS对元素内容的操作: 1.操作样式(style) 2.操作属性(Attribute) 3.操作内容(innerHtml/Text) 一.操作元素属性 常见属性:class.id.style.disabled. 自定义属性:可以自定义一个任意属性名称,可以任意放值,不会对所在元素本身有任何作用. this:代表所在最近的一个方法. 设置一个属性:a.setAttribute("属性名称","属性值");[不存在该属性名称时,创建这个属性,并赋值.当存在该属性名称时,

jquery追加元素的不同语法

问题 项目中越来越多的地方需要实现无刷新来更新页面局部内容,使用ajax从后台获取数据然后追加到页面中.那么怎么获取数据之后如何实现元素的追加呢? 解决 jQuery提供追加元素函数,掌握常用的四种追加函数,可以灵活地追加页面元素. 内部追加 追加到结尾 append() 方法在被选元素的结尾(在内部)插入指定内容. 语法: $(selector).append(content) 示例:在每个 p 元素结尾插入内容 $("button").click(function(){ $(&qu