javascript - div内のテキストを変更する方法

Question

動的に生成された Web ページには、次のような要素があります。

<div class="Lore Ipsum">foo bar</div>  
<div class="Lore Ipsum">ham spam</div>

次のようなテキストの後にいくつかのメモを表示したい:

foo bar - Wrong  
ham spam - Right

これらの要素を取得してコメントを追加するにはどうすればよいですか?
前もって感謝します。

注: 私は上記のページの作成者ではないため、ソースを編集できません。

score 3 · Accepted Answer

1 つのアプローチを次に示します。

var divs = document.getElementsByTagName('div');

for (var i=0, len=divs.length; i<len; i++){
    var current = divs[i];
    if (current.className == 'Lore Ipsum') {
        switch (current.firstChild.nodeValue) {
            case 'foo bar':
                current.firstChild.nodeValue += '- wrong';
                break;
            case 'ham spam':
                current.firstChild.nodeValue += '- right';
                break;
        }
    }
}

JS フィドルのデモ。

ただし、このアプローチは、質問に詳細がなく、HTML が記述されていないために作成しなければならなかったいくつかの仮定に基づいています。これらの仮定は次のとおりです。

両方divのクラスを持つこれらの要素のテキストコンテンツのみをチェックすること(およびそれらのクラス名は常にその順序になること)、 Lore Ipsum
チェックしたいテキストは、常にチェックしfirstChildたいdiv要素のです。

上記のコードは、クラス名の順序が重要でないように修正されました。

var divs = document.getElementsByTagName('div');

for (var i=0, len=divs.length; i<len; i++){
    var current = divs[i],
        cName = current.className;
    if (cName.indexOf('Lore') > -1 && cName.indexOf('Ipsum') > -1) {
        switch (current.firstChild.nodeValue) {
            case 'foo bar':
                current.firstChild.nodeValue += ' - wrong';
                break;
            case 'ham spam':
                current.firstChild.nodeValue += ' - right';
                break;
        }
    }
}

JS フィドルのデモ。

Shadow Wizard の正確なコメント (回答の下) に応じて、再度改訂しました。

div コンテンツに空白があると機能しません。例- 最初の空でない子を取得する関数を追加しますか?

を使用すると、比較のためにtrim()から前後の空白が削除されるため、次のようになります。nodeValuefoo barfoo bar

var divs = document.getElementsByTagName('div');

for (var i=0, len=divs.length; i<len; i++){
    var current = divs[i],
        cName = current.className;
    if (cName.indexOf('Lore') > -1 && cName.indexOf('Ipsum') > -1) {
        switch (current.firstChild.nodeValue.trim()) {
            case 'foo bar':
                current.firstChild.nodeValue += ' - wrong';
                break;
            case 'ham spam':
                current.firstChild.nodeValue += ' - right';
                break;
        }
    }
}

JS フィドルのデモ。

参考文献:

score 2 · Accepted Answer

ID の概念を取り除きました。それはあまりにも保守的ではありません。

&lt;div class="lore">Foo Bar</div>
<div class="lore">Ham Spam</div>
<div class="lore">Pina Colada</div>

Javascript

var elements = document.getElementsByClassName("lore");
for(i=0;i<=elements.length;i++) {
    content = elements[i].innerHTML;
    switch(content) {
        case "Foo Bar" :
            elements[i].innerHTML = content+ " - Wrong";
            break;
        case "Ham Spam" :
            elements[i].innerHTML = content + " - Right";
            break;
        default : 
            elements[i].innerHTML = content + " - What?";
    }            
}

getElementsByClassName を古いバージョンの IE などのより時代遅れのブラウザーで使用するには、実際には IE のみです。Robert Nyman アプローチをいつでも使用できます。

http://robertnyman.com/2008/05/27/the-ultimate-getelementsbyclassname-anno-2008/

また、これは動的コンテンツであることが言及されていることに気付きました。つまり、onLoad イベントが呼び出された後に発生する可能性があります。

この場合は、すべてを関数にしてから、ボタンやアンカータグなどの HTML コンポーネントを使用してその関数を呼び出します。

HTML

<div class="lore">Foo Bar</div>
<div class="lore">Ham Spam</div>
<div class="lore">Pina Colada</div>

<button onclick="validate()">Validate</button>

JavaScript

window.validate = function() {
    var elements = document.getElementsByClassName("lore");
    for (i = 0; i <= elements.length; i++) {
        content = elements[i].innerHTML;
        switch (content) {
        case "Foo Bar":
            elements[i].innerHTML = content + " - Wrong";
            break;
        case "Ham Spam":
            elements[i].innerHTML = content + " - Right";
            break;
        default:
            elements[i].innerHTML = content + " - What?";
        }
    }
}

</p>

http://jsfiddle.net/S5VBh/1/

score 1 · Accepted Answer

HTML コンテンツに基づいて別の HTML を追加しようとしている場合は、要素をループして各要素の innerHTML を検索し、それに応じて変更できます。

var els = document.getElementsByClassName("Lore Ipsum");
for(var i in els)
{
    switch(els[i].innerHTML){
        case "foo bar":
els[i].innerHTML = els[i].innerHTML + " - Wrong";
 break;
 case "ham spam":
els[i].innerHTML = els[i].innerHTML + " - Right";
 break;            
    };

}

このライブの例を参照してください。

http://jsfiddle.net/MgUJK/

score 0 · Accepted Answer

0

jqueryで

$('#idname').html( 'some text' );

于 2012-08-05T12:34:55.177 に答える

score 0 · Accepted Answer

次のことを行う必要があります。

コンテンツを変更する必要があるすべてのdivには、ID が必要です。したがって、次のように div タグを記述します。
簡単な Javascript を使用して、この例のように内容を変更します。

document.getElementById('MyDiv').innerHTML = 'foo バー - 間違っているかどうか';

お役に立てれば。

score 0 · Accepted Answer

document.getElementsByClassNameを使用して、関連する要素を取得し、それらにテキストを追加できます。例えば：

<div class="lorem_ipsum">foo bar</div>  
<div class="lorem_ipsum">ham spam</div>

var divs = document.getElementsByClassName('lorem_ipsum');

for (var i=0; i<divs.length; i++) {
    var content = divs[i].innerHTML;
    if (content == "foo bar")
        content += " - Wrong";
    else if (content == "ham spam")
        content += " - Right";

    divs[i].innerHTML = content;
}

ブラウザのサポートはgetElementsByClassNameさまざまです。最新のブラウザーのほとんどはこれをサポートしており、NodeListまたはHTMLCollectionを返します。両方ともプロパティlengthを持ち、ブラケット表記 ( ) で使用するためにそれらの要素を公開します[]。

ブラウザ間の完全な互換性を得るには、いくつかのトリックが必要です。古いブラウザーをサポートする必要がある場合は、JavaScript フレームワーク ( jQueryなど) を使用することをお勧めします。

jQuery を使用すると、上記は簡単になります。

$('.lorem_ipsum').each(function() {
    content = $(this).text();
    if (content == "foo bar")
        content += " - Wrong";
    else if (content == "ham spam")
        content += " - Right";

    $(this).text(content);
});

javascript - div内のテキストを変更する方法

6 に答える 6

Related

Reference