如何使用Javascript在UL-LI塊中進行簡單的DOM操作？

Question

我們在這里與rlemon進行了很長的關於DOM操作的聊天。 基本上，問題是'How can I change the UL-LI DOM with Javascript?' 例如，假設我要顯示類似"<ul><li><i>Hello 1, have a nice day!</i></li>...</ul>" ，而不是"<ul id='uids'><li>1</li><li>2</li></ul>" "<ul><li><i>Hello 1, have a nice day!</i></li>...</ul>"祝你"<ul><li><i>Hello 1, have a nice day!</i></li>...</ul>" -僅憑DOM操作如何做到這一點？

我知道這是一個簡單的問題，因此我對參考資料感到滿意，而不是費力地將其改寫。

關於DOM操作的簡單演示，您可以做這樣的事情嗎？

輸入項

  <ul id="uid"> <li>1</li> <li>2</li> </ul> 

輸出量

  <ul id="uid"> <li>Hello beautful lady 1!</li> <li>Hej gentleman 2.</li> </ul> 

可能對其他新手熟悉JS的功能特性很有用

1. http://chat.stackoverflow.com/rooms/17/conversation/learn-javascript-videos

2. http://ejohn.org/apps/learn/

Answer 1

使用innerHTML的簡短方法：

var lis = document.getElementById("uid").getElementsByTagName("li");
for(var i = 0; i < lis.length; i++)
    lis[i].innerHTML = "<i>Hello "+lis[i].innerHTML+", have a nice day!</i>";

jsFidlde： http : //jsfiddle.net/eZv4D/3/

從長遠來看，使用真正的DOM操作：

var lis = document.getElementById("uid").getElementsByTagName("li");
for(var i = 0; i < lis.length; i++) { // Loop through all <li> elements
    // Create an <i> element to contain the text
    var el = document.createElement("i");

    // Add the start of the text to the <i>
    el.appendChild(document.createTextNode("Hello "));
    // Add everything in the <li> to the <i> (they are removed from the <li>)
    while(lis[i].firstChild)
        el.appendChild(lis[i].firstChild);
    // Add the end of the text to the <li>
    el.appendChild(document.createTextNode(", have a nice day!"));

    // Add the <i> to the <li>
    lis[i].appendChild(el);
}

jsFiddle： http : //jsfiddle.net/eZv4D/2/

Answer 2

一種方法如下：

var liElems = document.getElementsByTagName('li'),
    strings = ['Hello beautiful lady ','Hej gentlemen '];

for (var i = 0, len = liElems.length; i < len; i++){
    elem = liElems[i].firstChild,
    curText = elem.nodeValue;
    if (i%2 == 0){
        elem.nodeValue = strings[0] + curText;
    }
    else {
        elem.nodeValue = strings[1] + curText;
    }
}

JS小提琴演示 。

參考文獻：

• 數組 。
• document.getElementsByTagName() 。
• for () {...} 。
• node.firstChild 。
• node.nodeValue 。

Answer 3

這是另一種方法：

http://jsfiddle.net/cWRPZ/

從...開始：

<ul>
    <li>1</li>
    <li>2</li>
</ul>

和js是..

var demo = {
    __elems: false,
    replacement: 'This is element __replaceme__',
    go: function(){
        this.__elems = document.querySelectorAll('li');
        for(var i = 0; i < this.__elems.length; i++){
            elem = this.__elems[i];
            elem.firstChild.nodeValue = this.replacement.replace('__replaceme__',elem.firstChild.nodeValue);
        }                
    }
}

demo.go();

要記住一些重要的事情， DOM中有一些nodeType ，並且並不是所有的nodeType都是您想要的，因此您應該進行過濾。 例如，如果在文本前面有一個注釋節點，則此操作將無法按您期望的那樣進行。

Answer 4

“學習很難。”

我正在使用這里介紹的工具JSLint分析他們的代碼，該視頻在此處大約44.00點。 Brilliand的簡單版本具有最少的spec（？）錯誤。 視頻中提到ES3.1即將問世，無論如何我都沒有資格說說它們現在是對還是錯–取決於規格（根據視頻，當前是1999年的規格）。 無論如何，我傾向於使用簡單的方法，有關分析的反饋？

大衛·托馬斯

 'document' was used before it was defined. var liElems = document.getElementsByTagName('li'), line 2 character 40Missing space between ',' and 'Hej gentlemen '. strings = ['Hello beautiful lady ','Hej gentlemen ']; line 4 character 6Move 'var' declarations to the top of the function. for (var i = 0, len = liElems.length; i < len; i++){ line 4 character 6Stopping. (30% scanned). 

布麗蘭

簡單

 'document' was used before it was defined. var lis = document.getElementById("uid").getElementsByTagName("li"); line 2 character 4Missing space between 'for' and '('. for(var i = 0; i < lis.length; i++) line 2 character 5Move 'var' declarations to the top of the function. for(var i = 0; i < lis.length; i++) line 2 character 5Stopping. (66% scanned). 

DOM版本

 'document' was used before it was defined. var lis = document.getElementById("uid").getElementsByTagName("li"); line 2 character 4Missing space between 'for' and '('. for(var i = 0; i < lis.length; i++) { // Loop through all <li> elements line 2 character 5Move 'var' declarations to the top of the function. for(var i = 0; i < lis.length; i++) { // Loop through all <li> elements line 2 character 5Stopping. (12% scanned). 

丹普

 Unexpected dangling '_' in '__elems'. __elems: false, line 4 character 17Expected exactly one space between 'function' and '('. go: function(){ line 4 character 19Expected exactly one space between ')' and '{'. go: function(){ line 4 character 19Missing space between ')' and '{'. go: function(){ line 5 character 9Missing 'use strict' statement. this.__elems = document.querySelectorAll('li'); line 5 character 14Unexpected dangling '_' in '__elems'. this.__elems = document.querySelectorAll('li'); line 5 character 24'document' was used before it was defined. this.__elems = document.querySelectorAll('li'); line 6 character 12Missing space between 'for' and '('. for(var i = 0; i < this.__elems.length; i++){ line 6 character 13Move 'var' declarations to the top of the function. for(var i = 0; i < this.__elems.length; i++){ line 6 character 13Stopping. (46% scanned). undefined document 'go' 4 

rlemon

 'document' was used before it was defined. var list = document.getElementById('uids'), // get the parent ul line 3 character 45Expected exactly one space between 'function' and '('. Array.prototype.forEach.call(items, function(item) { // because nodeLists are not arrays we do this for a forEach line 4 character 5Missing 'use strict' statement. var value = item.textContent || item.innerText; // gets the text content cross browser line 5 character 10Expected exactly one space between 'while' and '('. while(item.hasChildNodes()){ // this just removes the contents of the li without innerHTML, and is faster for this amount of data line 5 character 32Expected exactly one space between ')' and '{'. while(item.hasChildNodes()){ // this just removes the contents of the li without innerHTML, and is faster for this amount of data line 5 character 32Missing space between ')' and '{'. while(item.hasChildNodes()){ // this just removes the contents of the li without innerHTML, and is faster for this amount of data undefined document 'items' 3 clear 

Answer 5

var list = document.getElementById('uids'), // get the parent ul
    items = list.getElementsByTagName('li'); // get the items as a nodeList
Array.prototype.forEach.call(items, function(item) { // because nodeLists are not arrays we do this for a forEach
    var value = item.textContent || item.innerText; // gets the text content cross browser
    while(item.hasChildNodes()){ // this just removes the contents of the li without innerHTML, and is faster for this amount of data
        item.removeChild(item.lastChild);
    }
    item.appendChild(document.createTextNode("Wuddup " + value)); // append your new message :P
});

這是我的建議，但是，如果可以的話，在將列表輸出到文檔之前，請在服務器上全部進行此操作……這樣更有意義。

這是一個DEMO ，在消息生成上有點旋轉；）