javascript - 如何更改div中的文本

Question

动态生成的网页中有如下所示的元素：

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

我想在文本之后看到一些注释，如下所示：

foo bar - Wrong  
ham spam - Right  

如何获取这些元素并添加评论？
提前致谢。

注意：我不是上述页面的作者，所以我不能编辑来源。

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。这些假设是：

1. 您只想检查这些div元素的文本内容，并使用两者的类（并且 这些类名将始终按该顺序排列），Lore Ipsum
2. 并且您要检查的文本将始终是您要检查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 小提琴演示。

参考：

• getElementsByTagName().
• node.firstChild.
• node.nodeValue.
• switch.
• trim().

Answer 2

摆脱了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/

Answer 3

如果您希望根据 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/

Answer 4

您可以使用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);
});

Answer 5

用jQuery

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

Answer 6

您需要执行以下操作：

1. 您需要更改其内容的每个div都应该有一个 ID。所以你会这样写 div 标签：

2. 使用简单的 Javascript 并像这个例子一样修改内容。

   document.getElementById('MyDiv').innerHTML = 'foo bar - 错误或其他';

希望这可以帮助。