zoukankan      html  css  js  c++  java
  • 每天都有新发现——如何优雅的用js动态添加html代码

    每天都有新发现——如何优雅的用js动态添加html代码###如何优雅的用js动态的添加html代码

    >[原文](http://segmentfault.com/q/1010000000312781&sa=U&ei=r2deU9qOGM6iyAS79YHIDg&ved=0CGMQFjAK&usg=AFQjC)感谢Tychio提供的答案。

    ###三种方案:

    1.使用DOM

        //使用createElement创建元素
        var dialog = document.createElement('div');
        var img = document.createElement('img');
        var btn = document.createElement('input');
        var content = document.createElement('span');
        // 添加class
        dialog.className = 'dialog';
        // 属性
        img.src = 'close.gif';
        // 样式
        btn.style.paddingRight = '10px';
        // 文本
        span.innerHTML = '您真的要GG吗?';
        // 在容器元素中放入其他元素
        dialog.appendChild(img);
        dialog.appendChild(btn);
        dialog.appendChild(span);
        
    >关于添加class如果不考虑IE兼容性问题,可以使用classList方法,详细[API在这里](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList)。还有很多方法     用于DOM操作,在[这里](http://www.w3school.com.cn/htmldom/dom_methods.asp)。

    2.使用HTML5 template标签
        
        
          
            
            
            
          
        

    >接着还是得使用DOM操作,只是不需要创建元素了,然后复制一份副本放入正文即可。

        var dialog = document.querySelector('#dialog_tpl');
        dialog.content.querySelector('img').src = 'close.gif';
        dialog.content.querySelector('span').innerHTML = '您真的要GG吗?';
        document.body.appendChild(dialog.content.cloneNode(true));
        
    >template标签是隐藏的,最多是用在列表中,可以产生多个副本。详细使用方法可以参考[这篇文章](http://www.html5rocks.com/en/tutorials/webcomponents/template/?redirect_from_locale=zh)。如果要兼容不支持template的浏览器,可以把content的部分写一个兼容方法,并且把template用CSS隐藏掉即可。

    3.使用HTML模板

    >[这里](https://developer.mozilla.org/en-US/docs/JavaScript_templates)有各种模板,并且按语法风格分类。其实模板大同小异,就是动态修改模板文件使之成为一个可用的静态HTML文件,其实你也可以自己在需要的地方加载一部分HTML。只需要使用ajax请求一个情态的HTML文件并把返回的HTML代码放入当前的HTML中即可。



  • 相关阅读:
    P4555 [国家集训队]最长双回文串(回文树)
    【洛谷 P3805】 【模板】manacher算法
    【洛谷 P2485】 [SDOI2011]计算器 (BSGS)
    【洛谷 P3846】 [TJOI2007]可爱的质数 (BSGS)
    【洛谷 P1712】 [NOI2016]区间 (线段树+尺取)
    【洛谷 P1251】 餐巾计划问题 (费用流)
    【洛谷 P1337】[JSOI2004]平衡点 / 吊打XXX (模拟退火)
    【POJ 1719】 Shooting Contest (二分图匹配)
    【洛谷 P1631】 序列合并 (堆)
    【洛谷 P2515】 [HAOI2010]软件安装 (缩点+树形背包)
  • 原文地址:https://www.cnblogs.com/Zjingwen/p/4657127.html
Copyright © 2011-2022 走看看