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 Fiddle demo

然而，这种方法基于我必须做出的一些假设，因为问题中没有具体细节，而且HTML也是如此。这些假设是：

您只想查看这些div元素的文字内容，其中包含 Lore 和 {{1} （并且那些类名将总是按顺序排列），

并且您要检查的文字将始终是您要检查的Ipsum元素的firstChild。

修改上面的代码，使类名的顺序不重要：

div

JS Fiddle demo

再次修改，以回应Shadow Wizard的准确评论（在答案下方）：

如果div内容中有空格，则无效。 Example - 可能会添加一个函数来检索第一个非空子项吗？

使用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; } } }从trim()中删除前导和尾随空格以进行比较，因此nodeValue现在应该等于foo bar：

foo bar

JS Fiddle demo

参考文献：

getElementsByTagName()。

node.firstChild。

node.nodeValue。

switch。

trim()。

Answer 2

摆脱了ID概念。这太不可持续了。

<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?";
    }            
}

在更古老的IE浏览器中使用getElementsByClassName ...实际上只有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?";
        }
    }
}

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

使用jquery

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

Answer 5

您需要执行以下操作：

您需要更改内容的每个 div 都应该有ID。所以你要写这样的div标签：
使用简单的Javascript并修改此示例中的内容。

document.getElementById（'MyDiv'）。innerHTML ='foo bar - 错误或其他';

希望这有帮助。

Answer 6

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

如何更改div中的文本

6 个答案: