每天都有新發現——如何優雅的用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標簽