1. 程式人生 > >javascript動態插入html元素

javascript動態插入html元素

主要有是兩種方案:

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.使用html template ``` javascript var popContent =[ '<li class="monitory-point-li" indexcode="00000000001310013631">'
, '<span class="checkbox-unchecked"></span>', '<span class="monitory-text" title="'+name+'">'+formedName+'</span>', '</li>' ].join(' '); $('.document').append(popContent); <div class="se-preview-section-delimiter"
>
</div>

或者使用這種寫法

var popContent =
                '<li class="monitory-point-li" indexcode="00000000001310013631">'+
                  '<span class="checkbox-unchecked"></span>'+
                  '<span class="monitory-text" title="'+name+'">'+formedName+'</span>'+
                '</li>';
$('.document').append(popContent);