整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
rray.splice()方法是在數組中插入或刪除元素的通用方法。不同于slice()和concat(),splice()會修改調用的數組。
push()和pop()方法允許將數組當做棧來使用，push()方法在數組的尾部添加一個或多個元素，并返回數組新的長度。pop()方法則相反：它刪除數組的最后一個元素，減少數量數組長度并返回它的刪除的值。
unshift()和shift()方法的行為非常類似于push()和pop(),不一樣的是前者是在數組的頭部而非尾部進行元素的插入和刪除操作。unshift()在數組的頭部添加一個或多個元素,并將已存在的元素移動到更高索引的位置來獲得足夠的空間，最后返回數組新的長度。shift()刪除數組的第一個元素并將其返回，然后把所有的隨后的元素下移一個位置來填補數組頭部的空缺。
tostring()和toLocaleString()數組和其他JavaScript對象一樣擁有toString()方法。針對數組，該方法將其每個元素轉化為字符串（如有必要將調用元素的toString()方法）并且輸出用逗號分隔的字符串列表。
forEach()方法從頭至尾遍歷數組，為每個元素調用指定的函數。如上所述，傳遞的函數座位forEach()的第一個參數。
map() map()方法將調用的數組的每個元素傳遞給指定的函數，并返回一個數組，它包含該函數的返回值。
filter()方法返回的數組元素是調用的數組的一個子集。傳遞的函數是用來邏輯判定的：該函數返回true或false。
every()和some()方法是數組的邏輯判定：它們對數組元素應用指定的函數進行判定，返回true和false。
reduce()和reduceRight()方法使用指定的函數將數組元素進行組合，生成單個值。這在函數式編程中是常見的操作，也可以稱為"注入"和"折疊"。
這一篇文章將講述Redis中的list類型命令，同樣也是通過demo來講述，其他部分這里就不在贅述了。
項目Github地址：https://github.com/rainbowda/learnWay/tree/master/learnRedis/case-list
demo功能是隊列，整個demo的大致頁面如下。左邊是存儲到Redis中的數據，右邊是從Redis中彈出的數據。
首先定義一個存儲list的key
private static final String LIST_KEY="list:1";
隊列的key就用list:1
redis操作對象
private RedisTemplate redisTemplate; //string 命令操作對象 private ValueOperations valueOperations; //list 命令操作對象 private ListOperations listOperations;
list在Redis中的結構可以看下圖（圖片來源于Redis in Action）。
頭部插入
命令介紹
接下來看看demo中頭部插入的功能，點擊下圖中頭部插入按鈕，然后在彈出框中填入數字0，點擊提交后整個頭部插入流程結束。可以看到左邊的隊列數據出現了一條{"data":"0"} 數據，在數據{"data":"1"} 上面。
來看看后臺的方法
@RequestMapping(value="/leftPop",method=RequestMethod.GET)
public Object leftPop(){
return listOperations.leftPop(LIST_KEY);
}
如果需要在Redis中操作，可以敲下面的命令
lpush list:1 "{\"data\":\"0\"}"
尾部插入
命令介紹
接下來看看demo中尾部插入的功能，點擊下圖中尾部插入按鈕，然后在彈出框中填入數字11，點擊提交后整個新增流程結束。可以看到左邊的隊列數據出現了一條{"data":"11"} 數據，在數據{"data":"10"}下面。
來看看后臺的方法
@RequestMapping(value="/rightPop",method=RequestMethod.GET)
public Object rightPop(){
return listOperations.rightPop(LIST_KEY);
}
如果需要在Redis中操作，可以敲下面的命令
rpush list:1 "{\"data\":\"11\"}"
命令介紹
同樣先看看相關的獲取值命令
后臺查詢方法，將新增的內容查詢出來
@RequestMapping(value="/getList",method=RequestMethod.GET)
public List getList(){
List list=listOperations.range(LIST_KEY, 0, -1);
//可以用size獲取成員長度
//listOperations.size(LIST_KEY);
return list;
}
頭部彈出
接下來看看頭部彈出的功能，點擊下圖中頭部彈出按鈕，可以看到左邊的隊列頂部數據減少了，在右邊彈出的數據出現了左邊隊列數據消失的數據。
來看看后臺的方法
@RequestMapping(value="/leftPop",method=RequestMethod.GET)
public Object leftPop(){
return listOperations.leftPop(LIST_KEY);
}
如果需要在Redis中操作，可以敲下面的命令
lpop list:1
尾部彈出
接下來看看尾部彈出的功能，點擊下圖中尾部彈出按鈕，可以看到左邊的隊列尾部數據減少了，在右邊彈出的數據出現了左邊隊列數據消失的數據。
來看看后臺的方法
@RequestMapping(value="/rightPop",method=RequestMethod.GET)
public Object rightPop(){
return listOperations.rightPop(LIST_KEY);
}
如果需要在Redis中操作，可以敲下面的命令
rpop list:1
RPOPLPUSH和BRPOPLPUSH
這兩個命令作用其實是相同的，只不過BRPOPLPUSH是阻塞的，當沒有數據時，會一直阻塞，直到有數據。
在Redis官方文檔中，用RPOPLPUSH命令舉了兩個例子，一個是Reliable queue（安全的隊列 ），另一個是Circular list（循環列表）。
Reliable queue（安全的隊列 ）
Redis通常都被用做一個處理各種后臺工作或消息任務的消息服務器。 一個簡單的隊列模式就是：生產者把消息放入一個列表中，等待消息的消費者用 RPOP 命令（用輪詢方式）， 或者用 BRPOP 命令（如果客戶端使用阻塞操作會更好）來得到這個消息。
然而，因為消息有可能會丟失，所以這種隊列并是不安全的。例如，當接收到消息后，出現了網絡問題或者消費者端崩潰了， 那么這個消息就丟失了。
RPOPLPUSH (或者其阻塞版本的 BRPOPLPUSH） 提供了一種方法來避免這個問題：消費者端取到消息的同時把該消息放入一個正在處理中的列表。 當消息被處理了之后，該命令會使用 LREM 命令來移除正在處理中列表中的對應消息。
另外，可以添加一個客戶端來監控這個正在處理中列表，如果有某些消息已經在這個列表中存在很長時間了（即超過一定的處理時限）， 那么這個客戶端會把這些超時消息重新加入到隊列中。
翻譯來自 http://www.redis.cn/commands/rpoplpush.html
Circular list（循環列表）
RPOPLPUSH 命令的 source 和 destination 是相同的話， 那么客戶端在訪問一個擁有n個元素的列表時，可以在 O(N) 時間里一個接一個獲取列表元素， 而不用像 LRANGE 那樣需要把整個列表從服務器端傳送到客戶端。
上面這種模式即使在以下兩種情況下照樣能很好地工作： 有多個客戶端同時對同一個列表進行旋轉（rotating）：它們會取得不同的元素，直到列表里所有元素都被訪問過，又從頭開始這個操作。 有其他客戶端在往列表末端加入新的元素。
這個模式讓我們可以很容易地實現這樣一個系統：有 N 個客戶端，需要連續不斷地對一批元素進行處理，而且處理的過程必須盡可能地快。 一個典型的例子就是服務器上的監控程序：它們需要在盡可能短的時間內，并行地檢查一批網站，確保它們的可訪問性。
值得注意的是，使用這個模式的客戶端是易于擴展（scalable）且安全的（reliable），因為即使客戶端把接收到的消息丟失了， 這個消息依然存在于隊列中，等下次迭代到它的時候，由其他客戶端進行處理。
翻譯來自 http://www.redis.cn/commands/rpoplpush.html
案例-約瑟夫問題
約瑟夫問題（有時也稱為約瑟夫斯置換），是一個出現在計算機科學和數學中的問題。在計算機編程的算法中，類似問題又稱為約瑟夫環。
人們站在一個等待被處決的圈子里。 計數從圓圈中的指定點開始，并沿指定方向圍繞圓圈進行。 在跳過指定數量的人之后，執行下一個人。 對剩下的人重復該過程，從下一個人開始，朝同一方向跳過相同數量的人，直到只剩下一個人，并被釋放。
問題即，給定人數、起點、方向和要跳過的數字，選擇初始圓圈中的位置以避免被處決。
來自維基百科 https://zh.wikipedia.org/wiki/%E7%BA%A6%E7%91%9F%E5%A4%AB%E6%96%AF%E9%97%AE%E9%A2%98
思路
定義一個list key為josephus，利用
RPOPLPUSH josephus josephus
命令來構造循環鏈表，每當數到3時，使用rpop
rpop josephus
命令彈出
代碼實現
public class JosephusProblem extends RedisBaseConnection {
@Test
public void test() {
//構造數據
for (int i=1; i <=41; i++) {
listOperations.leftPush("josephus", String.valueOf(i));
}
int index=1;
while (listOperations.size("josephus") > 0) {
//當數到3時，彈出
if (index==3) {
System.out.println(listOperations.range("josephus", 0, -1));
System.out.println("當前被殺的人是：" + listOperations.rightPop("josephus"));
index=0;
} else {
listOperations.rightPopAndLeftPush("josephus", "josephus");
}
index++;
}
}
}
整個代碼步驟如下
運行結果有點長，這里只截圖最后一部分的結果，如下
約瑟夫問題代碼請點擊JosephusProblem.java （https://github.com/rainbowda/learnWay/blob/master/learnRedis/command/src/main/java/com/learnRedis/list/JosephusProblem.java?spm=a2c4e.11153940.blogcont623190.24.73ec20a8Mr05v3&file=JosephusProblem.java）
建議學習的人最好每個命令都去敲下，加深印象。下面詩句送給你們。
紙上得來終覺淺，絕知此事要躬行。————出自《冬夜讀書示子聿》
本文來自阿里云云棲社區，未經許可禁止轉載。
更多資訊，盡在云棲科技快訊~
來科技快訊看新聞鴨~
快點關注我認識我愛上我啊~~~
內容是《Web前端開發之Javascript視頻》的課件，請配合大師哥《Javascript》視頻課程學習。
Element.innerHTML屬性：
操作元素內HTML內容，即可設置或獲取使用HTML代碼表示的元素的后代；
在讀取時，該屬性返回與調用元素的所有子節點（包括元素、注釋和文本節點）對應的HTML代碼字會串，如：
<div id="mydiv">
<h2>零點程序員</h2>
<ul id="myList">
<li>HTML</li>
<li class="current">CSS</li>
<li>JavaScript</li>
</ul>
</div>
<script>
var mydiv=document.getElementById("mydiv");
console.log(mydiv.innerHTML);
</script>注：不同瀏覽器返回的文本格式有可能不同，比如，部分低版本會把所有標簽轉換為大寫；另外，瀏覽器會按照原先文檔的格式返回，包括空格和縮進；
在寫入時，會將給定的字符串解析為DOM子樹，將用這個DOM子樹替換調用元素原先的所有子節點；如果設置的值是文本沒有HTML標簽，其結果就是純文本，也就是文本節點，此時，如果該文本節點包含字符&、<或>， innerHTML將這些字符分別返回為&、<和>；
mydiv.innerHTML="零點程序員 & zeronetwork 主講><b>\"王唯\"</b>";
console.log(mydiv.innerHTML);
mydiv.innerHTML="零點程序員";設置元素的innerHTML屬性將會刪除該元素的所有后代，因此，如果要保留原來的內容，可以在innerHTML屬性的基礎上，可以使用+=進行賦值，也就達到了追加內容的效果；
mydiv.innerHTML +="<b>大師哥王唯</b>";如果設置innerHTML屬性時，使用了不合法的HTML代碼，瀏覽器會自動修正，但要避免出現這種問題；
另外，不允許document對象使用該屬性，如果使用了，會靜默失敗；
設置了innerHTML屬性后，可以像訪問文檔中的其他節點一樣訪問新創建的節點；
console.log(mydiv.childNodes);從本質上來看，設置innerHTML屬性，瀏覽器會把給定的值被解析為HTML或者XML，結果就是一個DocumentFragment對象，其中保存著代表元素的DOM節點，然后再append到元素中；
innerHTML也有一些限制，在多數瀏覽器中，通過innerHTML插入的<script> 元素不會被執行，因為有可能會產生潛在的安全問題；
var content=document.getElementById("content");
content.innerHTML="<script>alert('wangwei');<\/script>";即使如此，使用innerHTML屬性也不能消除潛在的風險，比如，繞過<script>標簽，把腳本綁定到相關的事件中；
mydiv.innerHTML="<img src='nourl' onerror='alert(\"加載圖片出錯啦\")'>";通過innerHTML寫入<style>元素就可以運行；如：
mydiv.innerHTML="<style>body{background-color:purple;}</style>";
// 放在head中
document.head.innerHTML +="<style>body{background-color:purple;}</style>";
console.log(document.head.innerHTML);在設置innerHTML屬性時，雖然元素的所有子元素被替換，其仍被保存在內存中，如果事先有變量在引用這些子元素，在設置innerHTML后，這些變量仍將保持對原始子元素的引用；
var mydiv=document.getElementById("mydiv");
var h2=mydiv.querySelector("h2");
mydiv.innerHTML="新內容";
console.log(h2);
mydiv.appendChild(h2);并不是所有元素都有innerHTML屬性，不支持的有<col> <colgroup> <frameset> <head> <html> <style> <table> <tbody> <thead> <tfoot> <title> <tr>
無論什么時候插入外界的HTML內容時，都應該對HTML進行無害化處理，IE8提供了window.toStaticHTML()方法，接受一個HTM字符串，返回一個經過無害化處理后的版本；
var mydiv=document.getElementById("mydiv");
var text="<a href='#' onclick='alert(\"hi\")'>zeronetwork</a>";
// mydiv.innerHTML=text;
var sanitized=window.toStaticHTML(text); // [?s?n?ta?zd]
console.log(sanitized); // 非IE會拋出異常
mydiv.innerHTML=sanitized;小示例：
使用innerHTML創建一種機制用于將消息記錄到頁面中的一個元素中；
<style>
.box{width: 600px;height: 300px;
border:1px solid black; padding: 2em; overflow: hidden scroll;}
</style>
<div class="box">
<h2>日志：</h2>
<div class="log"></div>
</div>
<script>
function log(msg){
var logEle=document.querySelector(".log");
var time=new Date().toLocaleTimeString();
logEle.innerHTML +=time + ": " + msg + "<br/>";
}
// log("打印一些數據");
// 定義一個事件處理程序
function logEvent(event){
var msg="Event <strong>" + event.type + "</strong> at <em>" +
event.clientX + "," + event.clientY + "</em>";
log(msg);
}
// 綁定事件處理程序
var boxEle=document.querySelector(".box");
boxEle.addEventListener("mousedown", logEvent);
boxEle.addEventListener("mouseup", logEvent);
boxEle.addEventListener("click", logEvent);
boxEle.addEventListener("mouseenter", logEvent);
boxEle.addEventListener("mouseleave", logEvent);
</script>Element.outerHTML屬性：
與innerHTML屬性基本一致，不同點是，innerHTML是訪問和設置元素的所有子節點，而outerHTML屬性不僅包括它的所有子節點，也包括它本身；
console.log(mydiv.outerHTML);
mydiv.outerHTML="<p><h2>零點網絡</h2></p>";如果元素沒有父元素，即如果它是文檔的根元素，在設置其outerHTML屬性將拋出異常，如：
document.documentElement.outerHTML="content"; // 異常這個屬性應用的機會非常少；
HTMLElement.innerText屬性：
可以操作元素中包含的所有文本，最初是由IE實現的，后來被納入標準中；
var mydiv=document.getElementById("mydiv");
console.log(mydiv.innerText);
mydiv.innerText="零點程序員";
console.log(mydiv.innerText);輸出一個文檔樹時，無論文本位于文檔樹中的什么位置，會按照由淺入深的順序，將子文檔樹中的所有文本拼接起來；
<div id="content">
<p>零點網絡<strong>zerontwork</strong>是一家從事IT教育的公司</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
</div>
<script>
var content=document.getElementById("content");
console.log(content.innerText);
// 返回
// 零點網絡zerontwork是一家從事IT教育的公司
//
// HTML/
// CSS
// Javascript
</script>由于不同瀏覽器處理空白字符的方式不同，因此輸出的文本可能會也可能不會包含原始的HTML代碼中的縮進；
使用innerText屬性設置內容時，會移除原先所有的子節點，將永遠只會生成當前節點的一個子文本節點；如果設置的內容包括HTML標簽，會自動被轉碼，也就是說，會對所有出現在文本中的HTML語法字符進行編碼（>、<、”、&）；
mydiv.innerText="<h2>wangwei</h2>"; // < > 會被轉義因為在訪問innerText屬性時，其會過濾掉html標簽，所以可以利用它的這個特點，快速過濾掉元素的HTML標簽，即把innerText設置為innerText；
content.innerText=content.innerText;
console.log(content.innerText);如果在設置innerHTML屬性時，賦給的就是純文本字符串，那它就與innerText屬性作用一樣了；
var mydiv=document.getElementById("mydiv");
mydiv.innerText="零點網絡 zeronetwork";
mydiv.innerHTML="零點網絡 zeronetwork";
mydiv.innerText="零點網絡\nzeronetwork"; // 有br
mydiv.innerHTML="零點網絡\nzeronetwork"; // 無br，但源碼格式有換行因為innerHTML是解析html標簽的，而\n不是標簽，所以當作空格被忽略了；但在innerText中，瀏覽器遇到\n，就會執行換行，所以把它解析為<br>；
在實際使用中，如果要過濾html標簽，可以使用正則，如：
// 去除html標簽可以使用正則
content.innerHTML=content.innerHTML.replace(/<.+?>/img,"");
console.log(content.innerText); // 沒有格式<br>
console.log(content.innerHTML); // 沒有格式<br>HTMLElement.outerText屬性：
與innerText一樣，只不過替換的是元素(包括子節點)本身；其是一個非標準屬性；
var mydiv=document.getElementById("mydiv");
console.log(mydiv.innerText);
console.log(mydiv.outerText); // 返回值與innerText一致在讀取文本值時，outerText和innerText的結果完全一樣；
但在寫模式下，outerText就完全不同了，其本身都會被新的文本節點都替代，從文檔中被刪除，但其仍然被保存在內存中，如果有變量引用，還可以再利用；
mydiv.outerText="零點程序員";
console.log(mydiv); // 依然保留著原有的引用FF不支持outerText屬性，如：
mydiv.outerText="零點程序員"; // 在FF中失效
// 在FF中返回undefined，如果有上一行，會打印出“零點程序員”，但這和內置的outerText沒有關系
console.log(mydiv.outerText);在實際使用中，只會用到innerHTML和innerText，其他兩個一般不用，也沒有多大的實際意義；
Node.textContent屬性：
DOM3規定了一個屬性textContent，該屬性被定義在Node接口中，它的作用類似innerText屬性，返回一個節點及其后代的所有文本內容；
var mydiv=document.getElementById("mydiv");
console.log(mydiv.innerText);
console.log(mydiv.textContent); // 返回值與innerText基本一致，但格式不一樣如果設置textContent屬性，會刪除該元素的所有子節點，并被替換為包含指定字符串的一個單獨的文本節點；
var mydiv=document.getElementById("mydiv");
mydiv.textContent="大師哥王唯";
mydiv.textContent="<h3>大師哥王唯</h3>"; // 會被轉碼
console.log(mydiv.textContent);
console.log(mydiv.childNodes); // NodeList [text]如果節點是文本節點，此屬性可用于取代 nodeValue 屬性，如；
var h2=document.querySelector("h2").firstChild; // 取得文本節點
console.log(h2.textContent); // zeronetwork
console.log(h2.nodeValue); // zeronetwork
h2.nodeValue="零點程序員";
console.log(h2.textContent); // 零點程序員
console.log(h2.nodeValue); // 零點程序員可以看出，兩者是聯動的；
如果事先有變量引用著它的后代節點，即使節點使用該方法移除所有后代節點，但被引用的后代節點依然存在，可以被再次利用；
var content=document.getElementById("content");
var h2=content.querySelector("h2"); // content中的h2
content.textContent="王唯";
console.log(content.textContent);
console.log(h2); // <h2>zeronetwork</h2>
console.log(h2.parentElement); // null
var mydiv=document.getElementById("mydiv");
mydiv.appendChild(h2);與innerText屬性的區別：
兩者的返回的內容并不完全一樣，比如在輸出的格式上其與innerText是不同的，其會保留代碼中的空白符；同時，innerText針對表格，會試圖保留表格的格式；
var mytable=document.getElementById("mytable");
console.log(mytable.innerText);
console.log(mytable.textContent);textContent屬性會返回元素的所有內容，包括其中的樣式和腳本代碼，而innerText只返回能呈現在頁面上的元素；
// 在mydiv中添加<style>和<script>標簽
var mydiv=document.getElementById("mydiv");
console.log(mydiv.innerText); // 不包括<style>和<script>
// 包括<style>和<script>標簽內的內容，但該標簽被過濾了
console.log(mydiv.textContent);既然innerText只返回能呈現在頁面上的元素，所以它的返回值會受CSS樣式的影響，不會返回被CSS隱藏的元素的文本；
<!-- textContent返回值沒有變化，但innerText不包括"HTML"和"CSS" -->
<ul id="mylist">
<li style="visibility: hidden;">HTML</li>
<li style="display: none;">CSS</li>
<li>JavaScript</li>
</ul>textContent屬性能返回文本節點的文本內容，而innerText會返回undefined；如果是文本節點調用textContent屬性，其返回值與nodeValue一致；
innerHTML有可能會引發安全問題，但textConent卻不會；
mydiv.innerHTML="<img src='nourl' onerror='alert(\"加載圖片出錯啦\")'>";
mydiv.textContent="<img src='nourl' onerror='alert(\"加載圖片出錯啦\")'>";
console.log(mydiv.childNodes); // index.html:20 NodeList [text]第一行的onerror會被執行，第二行不會執行，并且其被解析為文本節點，如此，textContent不會引發安全問題；
所有主流的瀏覽器都支持textContent屬性，但IE8及以下不支持，可以包裝一個兼容的函數：
function getInnerText(element){
return (typeof element.textContent=="string") ? element.textContent : element.innerText;
}
function setInnerText(element, text){
if(typeof element.textContent=="string")
element.textContent=text;
else
element.innerText=text;
}
document.write(getInnerText(content));
setInnerText(content, "零點程序員");或者直接定義在Node.prototype中：
if(Object.defineProperty
&& Object.getOwnPropertyDescriptor
&& !Object.getOwnPropertyDescriptor(Node.prototype, "textContent")){
(function(){
var innerText=Object.getOwnPropertyDescriptor(HTMLElement.prototype, "innerText");
Object.defineProperty(Node.prototype, "textContent",{
get: function(){
return innerText.get.call(this);
},
set: function(s){
return innerText.set.call(this, s);
}
});
})();
}<script>元素中的文本：
內聯的<script>元素有一個text屬性用來獲取它們的文本；
<script>
console.log("function");
function func(){return true;}
</script>
<script>
var script=document.getElementsByTagName("script")[0];
console.log(script.innerText);
console.log(script.textContent);
console.log(script.text); // 三者輸出一致
</script>如果將<script>元素的type屬性設置為”text/x-custom-data”，就表明了腳本為不可執行的Javascript代碼，如此，Javascript解析器將忽略該腳本，這也使得<script>元素可以被用來嵌入任意文本內容；
<script type="text/x-custom-data">
console.log("function");
function func(){return true;}
</script>
<script>
var script=document.getElementsByTagName("script")[0];
console.log(script.innerText);
console.log(script.textContent);
console.log(script.text); // 三者輸出一致
</script><script type="text/x-custom-data">
<div style="border:1px solid red; width:300px;">
<h2>視頻教程</h2>
</div>
</script>
<script>
var script=document.getElementsByTagName("script")[0];
var mydiv=document.getElementById("mydiv");
mydiv.innerHTML=script.text;
</script>Element.insertAdjacentHTML(position, text)方法：
該方法會將任意的HTML字符串text解析為Element元素，并將結果節點插入到DOM樹中的指定的元素”相鄰”的position位置；該方法最早是在IE4中出現的；它接收兩個參數：插入位置和要插入的HTML文本；
第一個參數position的可能值：
第二個參數text為HTML字符串，如果瀏覽器無法解析，會拋出錯誤，如；
var mydiv=document.getElementById("mydiv");
mydiv.insertAdjacentHTML("beforebegin","<p>前一個同輩元素</p>");
mydiv.insertAdjacentHTML("afterbegin","<p>作為第一個子元素</p>");
mydiv.insertAdjacentHTML("beforeend","<p>最后一個子元素</p>");
mydiv.insertAdjacentHTML("afterend","<p>后一個同輩元素</p>");insertAdjacentHTML()方法同innerHTML屬性一樣，會遇到安全問題，在使用該屬性插入HTML內容時，需要轉義之后才能使用；
另外，如果元素沒有子元素的時候，其和innerHTML就非常相像了；
var newdiv=document.createElement("div");
newdiv.insertAdjacentHTML("afterbegin", "<p>零點程序員</p>");
// 同以下
newdiv.innerHTML="<p>零點程序員</p>";
document.body.appendChild(newdiv);需要注意的是，如果position為beforebegin或afterend，那該元素必須具有一個parent元素；
var newdiv=document.createElement("div");
// 異常：The element has no parent，此時newdiv并沒有被添加到DOM樹中，它并沒有父節點，但是如果把下面行互換一下，就可以了；
newdiv.insertAdjacentHTML("afterend", "<p>零點程序員</p>");
document.body.appendChild(newdiv);基于insertAdjacentHTML()方法定義一個更符合語義邏輯的一個對象，如：
// Insert.before()、Insert.after()、Insert.atStart()和Insert.atEnd()
var Insert={
before: function(e,h) {
if(e.parentElement)
e.insertAdjacentHTML("beforebegin", h);
},
after: function(e,h) {
if(e.parentElement)
e.insertAdjacentHTML("afterend", h);
},
atStart: function(e,h) {e.insertAdjacentHTML("afterbegin", h);},
atEnd: function(e,h) {e.insertAdjacentHTML("beforeend", h);}
};
var mydiv=document.getElementById("mydiv");
Insert.before(mydiv, "<h2>zeronetwork</h2>");
// 或者
// 假定where值為before、after、innerfirst和innerlast
function insertHTML(el, where, html){
if(!el) return false;
var _where="beforeend";
switch(where){
case "before":
_where="beforebegin";
break;
case "after":
_where="afterend";
break;
case "innerfirst":
_where="afterbegin";
break;
case "innerlast":
_where="beforeend";
break;
default:
_where="beforeend";
break;
}
if(_where=="beforebegin" || _where=="afterend"){
if(!el.parentElement)
return false;
}
el.insertAdjacentHTML(_where, html);
}
var mydiv=document.getElementById("mydiv");
insertHTML(mydiv, "innerfirst", "<h2>zeronetwork</h2>");小示例，添加商品：
<div class="container">
<div class="formdiv">
<label>商品：</label><input type="text" id="product" /><br/>
<label>價格：</label><input type="text" id="price" /><br/>
<label>數量：</label><input type="text" id="quantity" /><br/>
<button id="btnAdd">添加</button>
</div>
<table class="table">
<thead>
<tr>
<th>序號</th><th>商品</th><th>價格</th><th>數量</th><th>金額</th>
</tr>
</thead>
<tbody id="data"></tbody>
</table>
</div>
<script>
var id=1;
var btnAdd=document.getElementById("btnAdd");
btnAdd.addEventListener("click",function(e){
var content=document.getElementById("data");
var product=document.getElementById("product").value;
var price=document.getElementById("price").value;
var quantity=document.getElementById("quantity").value;
var total=price * quantity;
var newEntry="<tr>" +
"<td>" + id + "</td>" +
"<td>" + product + "</td>" +
"<td>" + price + "</td>" +
"<td>" + quantity + "</td>" +
"<td>" + total + "</td>" +
"</tr>";
content.insertAdjacentHTML('afterbegin', newEntry);
id++;
},false);
</script>Element.insertAdjacentText(position, text)方法：
該方法與insertAdjacentHTML()類似，只不過插入的是純文本內容，它的作用是將一個給定的文本text插入到相對于被調用的元素的給定position位置；
position的值insertAdjacentHTML()中的position是一樣的；
var mydiv=document.getElementById("mydiv");
mydiv.insertAdjacentText("afterbegin","王唯");
mydiv.insertAdjacentText("afterend","zeronetwork");如果text是html字符串，也會被當作純文本進行處理，如：
// 頁面輸出：<h2>王唯</h2>
mydiv.insertAdjacentText("afterbegin","<h2>王唯</h2>");Element. insertAdjacentElement(position, element)方法：
將一個給定的元素節點插入到相對于被調用的元素的給定的position位置；與insertAdjacentHTML()方法類似，只不過插入的是一個節點對象；該方法會返回一個Element對象；
var mydiv=document.getElementById("mydiv");
var div=document.createElement("div");
div.innerHTML="<h2>zeronetwork</h2>";
div.style.width="200px";
div.style.height="100px";
div.style.backgroundColor="lightgray";
var newdiv=mydiv.insertAdjacentElement("beforeend", div);
console.log(div===newdiv); // truegithub上有人分享了一個包裝的方法，就是利用以上原生的方法；
// 把一個節點插入到DOM樹中的一個位置
function dominsert(parent, child, position){
var pos=position || 'beforeend';
if(typeof child==='string')
dominsert.html(parent, child, pos);
else
dominsert.element(parent, child, pos);
}
// 使用原生的insertAdjacentHTML()方法
dominsert.html=function(parent, child, position){
parent.insertAdjacentHTML(position, child);
};
// 使用原生的insertAdjacentElement()或insertBefore()方法
dominsert.element=function(parent, child, position){
if(parent.insertAdjacentElement)
parent.insertAdjacentElement(position, child);
else{
switch (position){
case "beforebegin":
parent.parentNode.insertBefore(child, parent);
break;
case "afterbegin":
parent.insertBefore(child, parent.firstChild);
break;
case "beforeend":
parent.appendChild(child);
break;
case "afterend":
parent.parentNode.insertBefore(child, parent.nextSibling);
break;
}
}
};
var mydiv=document.getElementById("mydiv");
dominsert(mydiv,"<span>web前端</span>");
dominsert(mydiv, "<b>零點程序員</b>", 'beforebegin');
console.log(mydiv);內存和性能問題：
使用以上的方法替換子節點可能會導致瀏覽器的內存占用問題，尤其是在IE中，問題更加明顯；
如果被刪除的子樹中的元素設置了事件處理程序或者引用了一個Javascript對象作為屬性，被刪除的元素與事件處理程序或引用的JS對象之間的綁定關系在內存中并沒有一并刪除；如果這種情況頻繁出現，頁面占用的內存數量就會明顯增加；因此，在使用innerHTML、outerHTML屬性和insertAdjacentHTML()方法時，最好手工先移除要被替換的元素的所有事件處理程序和JS對象屬性；
不要反復地使用innerHTML插入HTML；
var arr=["HTML","CSS","JavaScript"];
var ul=document.getElementById("myList");
for(var i=0,len=arr.length; i < len; i++){
ul.innerHTML +="<li>" + arr[i] + "</li>";
}，最好的做法是：單獨構建字符串變量，再一次性的把結果賦給innerHTML；
console.time("insert");
var lisHTML="";
for(var i=0,len=arr.length; i<len;i++){
lisHTML +="<li>" + arr[i] + "</li>";
}
ul.innerHTML=lisHTML;
console.timeEnd("insert");adjacent三個方法與insertBefore()、appendChild()和innerHTML的比較；
在某些時候，這些方法屬性都可以達到同樣的目的，但在實際開發中，要針對當時的情況，選擇一個合適的方法，沒有哪個方法就一定比另外的方法更好，只有相對的合適；
同時，這三個方法的性能雖然不一樣，但相差不大，幾乎可以忽略；
insertAdjacentHTML()與innerHTML屬性的性能：
insertAdjacentHTML()方法不會重新解析它正在使用的元素，因此它不會破壞元素內的現有元素，這就避免了額外的序列化步驟，但使用innerHTML時，特別是在原有的基礎上追加元素時，都會對原有的元素重新序列化，因此，前者比后者效率更快；
appendChild()與insertAdjacentHTML()方法的性能；
// time 10ms
console.time("append");
for(var i=0; i<1000; i++)
mydiv.appendChild(document.createElement("div"));
console.timeEnd("append");
// tim 30ms
console.time("adjacent");
for(var i=0; i<1000; i++)
mydiv.insertAdjacentHTML("beforeend","<div></div>");
console.timeEnd("adjacent");可以看到appendChild()方法比insertAdjacentHTML()方法快很多，但是改進以上代碼后，為其添加有文本內容的元素，如；
// time 30ms多
console.time("append");
for(var i=0; i<1000; i++){
var div=document.createElement("div");
var h2=document.createElement("h2");
h2.appendChild(document.createTextNode("零點程序員"));
div.appendChild(h2);
var p=document.createElement("p");
p.appendChild(document.createTextNode("由大師哥王唯主講"));
div.appendChild(p);
mydiv.appendChild(div);
}
console.timeEnd("append");
// time 40ms多
console.time("adjacent");
for(var i=0; i<1000; i++)
mydiv.insertAdjacentHTML("beforeend","<div><h2>零點程序員</h2><p>由大師哥王唯主講</p></div>");
console.timeEnd("adjacent");可以看到，兩者相差10ms，幾乎可以忽略不計；
比較appendChild()與insertAdjacentElement方法的性能；
如：把測試appendChild()方法中的mydiv.appendChild(div)改成mydiv.insertAdjacentElement("beforeend", div);即可；
發現兩者幾乎相同；
比較insertBefore()與以上兩者的性能；
如：把測試appendChild()方法中的mydiv.appendChild(div)，改成mydiv.insertBefore(div, mydiv.lastChild);，結束也大同小異；
小實例，排序表格；
基于表格指定列中單元格的值來進行排序；
<table id="mytable" border="1">
<thead>
<tr>
<th>ID</th><th>Name</th><th>Sex</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>wangwei</td><td>女</td>
</tr>
<tr>
<td>2</td><td>jingjing</td><td>男</td>
</tr>
<tr>
<td>3</td><td>juanjuan</td><td>女</td>
</tr>
</tbody>
</table>
<script>
// 根據指定表格每行第n個單元格的值，對第一個<tbody>中的行進行排序
// 如果存在comparator函數則使用它，否則按字母表順序比較
function sortrows(table, n, comparator){
var tbody=table.tBodies[0]; // 第一個<tbody>，可能是隱式創建的
var rows=tbody.getElementsByTagName("tr"); // tbody中所有行
rows=Array.prototype.slice.call(rows, 0); // 變成數組
// 基于第n個<td>元素的值進行排序
rows.sort(function(row1, row2){
var cell1=row1.getElementsByTagName("td")[n]; // 獲得第n個單元格
var cell2=row2.getElementsByTagName("td")[n]; // 同上
var val1=cell1.textContent || cell1.innerText; // 獲得文本內容
var val2=cell2.textContent || cell2.innerText;
if(comparator) return comparator(val1,val2); // 進行排序
if(val1 < val2) return -1;
else if(val1 > val2) return 1;
else return 0;
});
// rows中已經排好序，在tbody中按它們的順序把行添加到最后
// 這將自動把它們從當前位置移走，并不是刪除，而是移動
for(var i=0; i<rows.length; i++){
tbody.appendChild(rows[i]);
}
}
// 查找元素的<th>元素，讓它們可單擊，可以按該列排序
function makeSortable(table){
var headers=table.getElementsByTagName("th");
for(var i=0; i<headers.length; i++){
(function(n){
headers[i].onclick=function() {
sortrows(table, n);
};
}(i));
}
}
var mytable=document.getElementById("mytable");
makeSortable(mytable);
</script>小實例，生成目錄表：
<style>
#TOC{border:solid black 1px; margin:10px; padding: 10px;}
.TOCEntry{}
.TOCEntry a{text-decoration: none;}
.TOCLevel1{font-size: 2em;}
.TOCLevel2{font-size: 1.5em; margin-left: 1em;}
.TOCSectNum::after{content: ": ";}
</style>
<script>
// 當執行這個函數時會去文檔中查找id為"TOC"的元素；
// 如果這個元素不存在，就創建一個元素
// 生成的TOC目錄應當具有自己的CSS樣式，整個目錄區域的樣式className設置為"TOCEntry"；
// 為不同層級的目錄標題定義不同的樣式，<h1>標簽生成的標題className為"TOCLevel1"，
// <h2>標簽生成的標題className為”TOCLevel2“，以此類推；段編號的樣式為"TOCSectNum"
function createToc(){
// 查找TOC容器元素，如果不存在，則在文檔開頭處創建一個
var toc=document.getElementById("TOC");
if(!toc){
toc=document.createElement("div");
toc.id="TOC";
document.body.insertBefore(toc, document.body.firstChild);
}
// 查找所有的標題元素
var headings;
if(document.querySelectorAll)
headings=document.querySelectorAll("h1,h2,h3,h4,h5,h6");
else
headings=findHeadings(document.body, []);
// 遞歸遍歷document的body，查找標題元素
function findHeadings(orrt, sects){
for(var c=root.firstChild; c!=null; c=c.nextSibling){
if(c.nodeType !==1) continue;
if(c.tagName.length==2 && c.tagName.charAt(0)=="H")
sects.push(c);
else
findHeadings(c, sects);
}
return sects;
}
// 初始化一個數組來保存跟蹤章節號
var sectionNumbers=[0,0,0,0,0,0];
// 循環找到所有標題元素
for(var h=0; h<headings.length; h++){
var heading=headings[h];
// 跳過在TOC容器中的標題元素
if(heading.parentNode==toc) continue;
// 獲取標題的級別
var level=parseInt(heading.tagName.charAt(1));
if(isNaN(level) || level < 1 || level > 6) continue;
// 對于該標題級別增加sectionNumbers對應的數字
// 并重置所有標題比它級別低的數字為零
sectionNumbers[level-1]++;
for(var i=level; i<6; i++) sectionNumbers[i]=0;
// 將所有標題級的章節號組合產生一個章節號，如2.3.1
var sectionNumber=sectionNumbers.slice(0, level).join(".");
// 為標題級別增加章節號
// 把數字放在<span>中，使得其可以秀樣式修飾
var span=document.createElement("span");
span.className="TOCSectNum";
span.innerHTML=sectionNumber;
heading.insertBefore(span, heading.firstChild);
// 用命名的錨點將標題包起來，以便為它增加鏈接
var anchor=document.createElement("a");
anchor.name="TOC" + sectionNumber;
heading.parentNode.insertBefore(anchor, heading);
anchor.appendChild(heading);
// 為該節創建一個鏈接
var link=document.createElement("a");
link.href="#TOC" + sectionNumber; // 鏈接目標地址
link.innerHTML=heading.innerHTML; // 鏈接文本與實際標題一致
// 將鏈接放在一個div中，div用基于級別名字的樣式修飾
var entry=document.createElement("div");
entry.className="TOCEntry TOCLevel" + level;
entry.appendChild(link);
// 該div添加到TOC容器中
toc.appendChild(entry);
}
};
window.onload=function(){createToc();}
</script>Web前端開發之Javascript
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
