標籤：js append() appendchild()
一．在使用jquery時，
append() 方法在被選元素的結尾（仍然在內部）插入指定內容
使用方法：$(selector).append(content)，content為必需的。規定要插入的內容（可包含 HTML 標籤）
二．在使用原生js時，使用appendChild() 方法可向節點的子節點列表的末尾添加新的子節點，
用法：parent.appendChild(child); child沒有引號包住，child參數，是node類型。給一個空文檔裡面動態建立元素，要使用document.body.appendChild(child).
三.例子
<style> .test{ color: red; border:1px solid red; display: inline-block; font-size: 20px; width: 200px; height:50px; }</style></head><body> <p id="p1">appendChild方法是在父級節點中的子節點的末尾添加新的節點</p> <p id="p2">jquery中append方法在被選元素的結尾（仍然在內部）插入指定內容</p></body><script src="script/jquery-1.11.3.js"></script><script>//用jquery來實現$(function(){$("#p2").bind("click",function(){ $(this).append("<strong>---我是用jquery實現的</strong>");})})//用原生js來實現/*window.onload=function(){var pobj=document.getElementById(‘p1‘); pobj.onclick=function(){var strongobj=document.createElement(‘strong‘); var textobj=document.createTextNode("----我是使用原生Js實現的"); pobj.appendChild(strongobj.appendChild(textobj));}}*/</script>
：點擊第二個p文本段，在後面追加一個<strong>....</strong>
650) this.width=650;" src="http://s5.51cto.com/wyfs02/M02/7E/8C/wKioL1cEejTwO5UoAAAwB8CfdZo487.jpg" title="2.jpg" alt="wKioL1cEejTwO5UoAAAwB8CfdZo487.jpg" />
當把代碼中的js原生代碼實現的：點擊第一個p文本段，在後面追加一個<strong></strong>，再添加一個文本段，然後追加到p文本段後面
650) this.width=650;" src="http://s2.51cto.com/wyfs02/M01/7E/90/wKiom1cEec3g4vhgAAA4lsOPfxM049.jpg" title="1.jpg" alt="wKiom1cEec3g4vhgAAA4lsOPfxM049.jpg" />
四.缺點：
在使用js代碼實現時，樣式方面實現有些小問題，在以後的學習中，繼續補充，完善。
本文出自 “夢想需要堅持” 部落格，請務必保留此出處http://xiyin001.blog.51cto.com/9831864/1760806
js原生方式實現jquery中的append()方法
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
