如何优雅的用js动态添加html代码-Article-IT72.COM

如何优雅的用js动态添加html代码

Home / Article MrLee 2016-9-14 3833

###三种方案：

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);

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));

3.使用HTML模板

有各种模板，并且按语法风格分类。其实模板大同小异，就是动态修改模板文件使之成为一个可用的静态HTML文件，其实你也可以自己在需要的地方加载一部分HTML。只需要使用ajax请求一个情态的HTML文件并把返回的HTML代码放入当前的HTML中即可。

本文链接:https://www.it72.com/10218.htm