腳本更改內部HTML不起作用

Question

我使用以下腳本來更改內部HTML，但它不起作用。 我在這裏錯過了什麼？

腳本：

<script type="text/javascript"> 
var allElements = document.body.getElementsByClassName("benkopte-specs-list"); 
for(var i = 0; i < allElements.length; i++) { 
    var text = allElements[i].innerHTML; 
    if (text == 'Ja') { 
     allElements[i].innerHTML = "<i class='icon-specs-ja'></i>"; 
    } 
    if (text == 'Yes') { 
     allElements[i].innerHTML = "<i class='icon-specs-ja'></i>"; 
    } 
    if (text == 'Nee') { 
     allElements[i].innerHTML = "<i class='icon-specs-nee'></i>"; 
    } 
    if (text == 'No') { 
     allElements[i].innerHTML = "<i class='icon-specs-nee'></i>"; 
    } 
} 
</script> 

HTML：

<ul class="benkopte-specs-list"> 
<li><span class="specs-info-front">WiFi</span>Ja <span class="specs-info-last">WiFi</span></li> 
</ul> 

Answer 1

你真正想要的是與他們的同行<i>更換的話Ja，Yes等。這裏是你將如何做到這一點：

var allElements = document.body.getElementsByClassName("benkopte-specs-list"); 
 
for(var i = 0; i < allElements.length; i++) { 
 
    var text = allElements[i].innerHTML; 
 
    
 
    console.log(text) 
 
    if (text.indexOf('Ja') > -1) { 
 
     allElements[i].innerHTML = text.replace("Ja", "<i class='icon-specs-ja'></i>"); 
 
    } 
 
    if (text.indexOf('Yes') > -1) { 
 
     allElements[i].innerHTML = text.replace("Yes", "<i class='icon-specs-ja'></i>"); 
 
    } 
 
    if (text.indexOf('Nee') > -1) { 
 
     allElements[i].innerHTML = text.replace("Nee", "<i class='icon-specs-ja'></i>"); 
 
    } 
 
    if (text.indexOf('No') > -1) { 
 
     allElements[i].innerHTML = text.replace("No", "<i class='icon-specs-ja'></i>"); 
 
    } 
 
}

<ul class="benkopte-specs-list"> 
 
    <li><span class="specs-info-front">WiFi</span>Ja <span class="specs-info-last">WiFi</span></li> 
 
</ul>

這裏，Ja已經在HTML取代<i class='icon-specs-ja'></i>。

Answer 2

您正在測試，看看是否innerHTML等於一個值，而不是檢查，看它是否 「包含」 該值。

此外，你不是正確的查詢。您應該查詢您要測試的文本前面的span，而不是ul，因爲這會導致您獲取它包含的並且不是您想要的整個HTML字符串。

接下來，getElementsByClassName()當然有效，但是因爲它返回一個「活的」節點列表，所以使用它會有性能影響。一般情況下，請使用querySelectorAll()。另外，由於您似乎需要「是」和「Ja」以及「否」和「Nee」的輸出相同，因此可以將if/then語句壓縮爲兩個。

// Search for the span that comes right before the text you want 
 
var allElements = document.querySelectorAll(".benkopte-specs-list .specs-info-front"); 
 
for(var i = 0; i < allElements.length; i++) { 
 

 
    // Get the text (not HTML) of the following node 
 
    var text = allElements[i].nextSibling.textContent; 
 
    
 
    console.log("Old content was: " + allElements[i].nextSibling.textContent); 
 
    
 
    // Even now that the correct text is being searched, it may be better to check for 
 
    // contents than an exact match as you also have spaces in the text 
 
    // string.indexOf(pattern) returns -1 if the pattern is not found within the string 
 
    
 
    // There are two values that will result in one class, so test for either of them 
 
    if (text.indexOf('Ja') > -1 || text.indexOf('Yes') > -1) { 
 
     allElements[i].nextSibling.innerHTML = "<i class='icon-specs-ja'>" + text + "</i>"; 
 
    } 
 

 
    // There are two values that will result in one class, so test for either of them 
 
    if (text.indexOf('Nee') > -1 || text.indexOf('No') > -1) { 
 
     allElements[i].nextSibling.innerHTML = "<i class='icon-specs-nee'>" + text + "</i>"; 
 
    } 
 

 
    console.log("New content is: " + allElements[i].nextSibling.innerHTML); 
 
}

<ul class="benkopte-specs-list"> 
 
    <li><span class="specs-info-front">WiFi</span>Ja <span class="specs-info-last">WiFi</span></li> 
 
</ul>