スクリプトの変更内部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を照会する必要があります。その理由は、それが含まれているHTMLストリング全体を取得することになります。

次に、getElementsByClassName()が動作しますが、「ライブ」ノードリストが返されるため、パフォーマンスに影響があります。通常、代わりにquerySelectorAll()を使用してください。

また、 "Yes"と "Ja"と "No"と "Nee"の出力が同じであるように思われるので、if/thenステートメントを2つに縮約することができます。

// 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>