zoukankan      html  css  js  c++  java
  • JavaScript生成新标签的三个方法(摘抄自留)

     1     <div id="d1"></div>
     2 <script>
     3     //HTML
     4     function a(){
     5         document.getElementById("d1").innerHTML="<img src='http://baike.baidu.com/cms/rc/240x112dierzhou.jpg'>";
     6     }
     7     a();
     8     //方法
     9     function b(){
    10         var d1=document.getElementById("d1");
    11         var img=document.createElement("img");
    12         img.src="http://baike.baidu.com/cms/rc/240x112dierzhou.jpg";
    13         d1.appendChild(img);
    14     }
    15     b();
    16     //对象
    17     function c(){
    18         var cc=new Image();
    19         cc.src="http://baike.baidu.com/cms/rc/240x112dierzhou.jpg";
    20         document.getElementById("d1").appendChild(cc);
    21         pload();
    22     }
    23     c();
    24 </script>

    使用JavaScript或者jQuery的方法相对灵活一些

    1     <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
    2     <script type='text/javascript'>
    3     $('.hello').html("<img src='http://baike.baidu.com/cms/rc/240x112dierzhou.jpg'></img>"); // 覆盖原来标签的内容
    4     $('.hello').append("<img src='http://baike.baidu.com/cms/rc/240x112dierzhou.jpg'></img>"); // 追加(标签内)
    5     $('.hello').after("<img src='http://baike.baidu.com/cms/rc/240x112dierzhou.jpg'></img>"); // 追加(标签外)后
    6     </script>

    预留动态加入形式的js代码:

     1 $(function(){
     2     $(".add_station").click(function(){
     3         $(this).after('<p class="add_station">就是你</p>');
     4     });
     5 });
     6 // 新生成的元素,没有单击触发事件(原来的有,新生成的没有)
     7 
     8 $(function(){
     9     $(".add_station").live('click' , function(){
    10         $(this).after('<p class="add_station">就是你</p>');
    11     });
    12 }); // 这个代码可以解决这个问题
  • 相关阅读:
    字节序列高低端问题
    简单的进制转换
    网页中如何调用WIN本地程序
    获取CAN报文并解析
    异步通信服务选型
    PostgreSQL 更新JSON,JSONB字段
    js,Date的toJSON方法时间和当地时间不一致如何处理
    js中字符串的替换 replace方法
    百度富文本编辑器umeditor,ueditor字体修改无效的问题
    python 3 基础之类和对象的创建、面向对象的三大特性
  • 原文地址:https://www.cnblogs.com/online-link/p/6062423.html
Copyright © 2011-2022 走看看