動態生成HTML元素併為元素追加屬性

風靈使發表於2018-04-25
HTML

動態生成HTML元素的方法由三種：

第一種：document.createElement()建立元素，再用appendChild()方法將元素新增到指定節點;

新增a元素：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title></title>  
</head>  
<body>  
<div id="main">  
    <span id="login"></span>  
</div>  
</body>  
<script>  
    var link = document.createElement('a');  
    link.setAttribute('href','#');  
    link.setAttribute('id','login');  
    link.style.color = 'green';  
    link.innerHTML = '登入';  
    var main = document.getElementById('main');  
    main.appendChild(link);  
</script>  
</html>

第二種：使用innerHTML直接將元素新增到指定節點：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title></title>  
</head>  
<body>  
<div id="main">  
    <span id="login"></span>  
</div>  
</body>  
<script>  
    var link = document.createElement('a');  
    //使用innerHTML將元素直接新增到指定節點  
    main.innerHTML = "<a href='#' id='login' style='color: red;'>登入</a>";  

</script>  
</html>

第三種：jQuery建立節點
jQuery中建立DOM物件，使用jQuery的工廠函式$()完成，格式如下：

$(html);

$(html)會根據傳入的HTML標記字串，建立一個DOM物件，並將這個DOM物件包裝成一個jQuery物件後返回.

jQuery中將建立的節點插入文字中，使用append()等方法

jQuery中插入節點方法有：

1.append():向每個匹配的元素內部追加內容

2.appendTo():將所有匹配的元素追加到指定元素中，顛倒了常規的$(A).append(B)方法，不是將B追加到A中，而是將A追加到B中

3.prepend()方法：向每個匹配的元素內部前置內容

4.prependTo():將所有匹配的內容前置到指定的元素中，與prpend()方法顛倒

5.after() 向每個匹配的元素之後插入內容

6.insertAfter()將所有匹配的元素插入到指定元素的後面,與after()方法顛倒

7.before()在每個匹配的元素之前插入內容

8.insertBefore()將每個匹配的元素插入到指定內容之前，與before()方法顛倒

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <script src="jquery-1.11.1.min.js"></script>  
    <script>  
    $(function(){  
    var $link=$('<a href="#" id="link" style="color:pink">登入</a>');  
        $('#main').append($link);  

    })  
    </script>  
</head>  
<body>  
<div id="main"></div>  
</body>  

</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

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

相關文章