溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關如何動態生成HTML元素并為元素追加屬性的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
第一種：document.createElement()創建元素，再用appendChild()方法將元素添加到指定節點;
添加a元素：
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8">
<title></title> </head> <body> <p id="main">
<span id="login"></span> </p> </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> <p id="main">
<span id="login"></span> </p> </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> <p id="main"></p> </body> </html>主要有是兩種方案：
1.使用DOM
//使用createElement創建元素
var dialog = document.createElement('p');
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);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);<p class="se-preview-section-delimiter"></p>
或者使用這種寫法
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);感謝各位的閱讀！關于“如何動態生成HTML元素并為元素追加屬性”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
