這篇文章跟大家分享的是關於如何動態產生html元素以及為元素追加屬性的方法介紹（附程式碼），內容很不錯，有需要的朋友可以參考一下，希望可以幫助到大家。
動態產生HTML元素的方法有三種：
第一種：document.createElement()建立元素，再用appendChild( )方法將元素新增至指定節點
<!DOCTYPE html>
<html>
<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>
<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>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.1.min.js"></script>
<style type="text/css">
.newStyle{
color:red
}
</style>
<script>
$(function(){
var link=$('<a href="#" id="link" style="color:pink">登录</a>');
$('#main').append(link).addClass("newStyle");
})
</script>
</head>
<body>
<div id="main"></div>
</body>
</html>以上是如何動態產生html元素以及為元素追加屬性的方法介紹（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
