動(dòng)態(tài)生成HTML元素并為元素追加屬性
發(fā)表時(shí)間：2023-09-12 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]這篇文章主要介紹了關(guān)于動(dòng)態(tài)生成HTML元素并為元素追加屬性，有著一定的參考價(jià)值，現(xiàn)在分享給大家，有需要的朋友可以參考一下動(dòng)態(tài)生成HTML元素的方法由三種：第一種：document.createElement()創(chuàng)建元素，再用appendChild()方法將元素添加到指定節(jié)點(diǎn);添加a元素：<!...
這篇文章主要介紹了關(guān)于動(dòng)態(tài)生成HTML元素并為元素追加屬性，有著一定的參考價(jià)值，現(xiàn)在分享給大家，有需要的朋友可以參考一下
動(dòng)態(tài)生成HTML元素的方法由三種：
第一種：document.createElement()創(chuàng)建元素，再用appendChild()方法將元素添加到指定節(jié)點(diǎn);
添加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直接將元素添加到指定節(jié)點(diǎn)：
<!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將元素直接添加到指定節(jié)點(diǎn)
main.innerHTML = "<a href='#' id='login' style='color: red;'>登錄</a>";
</script> </html>第三種：jQuery創(chuàng)建節(jié)點(diǎn)
jQuery中創(chuàng)建DOM對(duì)象，使用jQuery的工廠函數(shù)$()完成，格式如下：
$(html);
$(html)會(huì)根據(jù)傳入的HTML標(biāo)記字符串，創(chuàng)建一個(gè)DOM對(duì)象，并將這個(gè)DOM對(duì)象包裝成一個(gè)jQuery對(duì)象后返回.
jQuery中將創(chuàng)建的節(jié)點(diǎn)插入文本中，使用append()等方法
jQuery中插入節(jié)點(diǎn)方法有：
1.append():向每個(gè)匹配的元素內(nèi)部追加內(nèi)容
2.appendTo():將所有匹配的元素追加到指定元素中，顛倒了常規(guī)的$(A).append(B)方法，不是將B追加到A中，而是將A追加到B中
3.prepend()方法：向每個(gè)匹配的元素內(nèi)部前置內(nèi)容
4.prependTo():將所有匹配的內(nèi)容前置到指定的元素中，與prpend()方法顛倒
5.after() 向每個(gè)匹配的元素之后插入內(nèi)容
6.insertAfter()將所有匹配的元素插入到指定元素的后面,與after()方法顛倒
7.before()在每個(gè)匹配的元素之前插入內(nèi)容
8.insertBefore()將每個(gè)匹配的元素插入到指定內(nèi)容之前，與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>
javascript動(dòng)態(tài)追加html元素
主要有是兩種方案：
1.使用DOM
//使用createElement創(chuàng)建元素
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);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);<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);相關(guān)推薦：
jQuery操作html元素點(diǎn)擊事件詳解
以上就是動(dòng)態(tài)生成HTML元素并為元素追加屬性的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
