Javascript 如何更改div中的文本_Javascript

Javascript 如何更改div中的文本

javascript

Javascript 如何更改div中的文本,javascript,Javascript,动态生成的网页中有如下元素： foo-bar 火腿肉我想在课文后看到一些注释，如下所示： foo-bar-错误火腿肉-对如何获取这些元素并添加注释？提前谢谢注意：我不是上面提到的页面的作者，因此我无法编辑源代码。使用jquery $('#idname').html( 'some text' ); 使用jquery $('#idname').html( 'some text' ); 您需要执行以下操作：您需要更改的每个div的内容都应该有一个ID。因此，您可以这样编写div标记

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

foo-bar
火腿肉

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

foo-bar-错误
火腿肉-对

如何获取这些元素并添加注释？
提前谢谢

注意：我不是上面提到的页面的作者，因此我无法编辑源代码。

使用jquery

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

使用jquery

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

您需要执行以下操作：

您需要更改的每个div的内容都应该有一个ID。因此，您可以这样编写div标记：

使用简单的Javascript并修改内容，如本例所示

document.getElementById（'MyDiv'）.innerHTML='foobar-error或其他'

希望这有帮助。

您需要执行以下操作：

您需要更改的每个div的内容都应该有一个ID。因此，您可以这样编写div标记：

使用简单的Javascript并修改内容，如本例所示

document.getElementById（'MyDiv'）.innerHTML='foobar-error或其他'

希望这有帮助。

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

var elements=document.getElementsByClassName（“lore”）；
因为（i=0；i去掉了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?";
    }            
}

var elements=document.getElementsByClassName（“lore”）；
对于（i=0；i如果您希望根据HTML内容添加不同的HTML，那么您可以循环遍历元素，搜索每个元素的内部HTML并相应地修改
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;            
    };

}

看看这个活生生的例子
如果您希望根据HTML内容添加不同的HTML，那么您可以在元素之间循环，搜索每个元素的内部HTML并进行相应修改
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;            
    };

}

看看这个活生生的例子
这里有一种方法：
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;
        }
    }
}


再次修订，以回应影子向导的准确评论（答案下方）：
如果div内容中有空格，它将不起作用。-也许添加一个函数来检索第一个非空的子项
使用trim（）
从nodeValue
中删除前面和后面的空格，以便进行比较，因此foo-bar
现在应该等于foo-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;
        }
    }
}

var divs=document.getElementsByTagName（'div'）；
对于（变量i=0，len=divs.length；i-1&&cName.indexOf（'Ipsum'）>-1）{
开关（current.firstChild.nodeValue.trim（））{
“富吧”案：
current.firstChild.nodeValue+='-错误'；
打破
“火腿肉”一案：
current.firstChild.nodeValue+='-右'；
打破
}
}
}


参考资料：






这里有一种方法：
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;
        }
    }
}


再次修订，以回应影子向导的准确评论（答案下方）：
如果div内容中有空格，它将不起作用。-也许添加一个函数来检索第一个非空的子项
使用trim（）
从nodeValue
中删除前面和后面的空格，以便进行比较，因此foo-bar
现在应该等于foo-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;
        }
    }
}

var divs=document.getElementsByTagName（'div'）；
对于（变量i=0，len=divs.length；i-1&&cName.indexOf（'Ipsum'）>-1）{
开关（current.firstChild.nodeValue.trim（））{
“富吧”案：
current.firstChild.nodeValue+='-错误'；
打破
“火腿肉”一案：
current.firstChild.nodeValue+='-右'；
打破
}
}
}


参考资料：






您可以使用获取相关元素并向其添加一些文本。例如：
foo-bar
火腿肉

var divs=document.getElementsByClassName（'lorem_ipsum'）；
对于（var i=0；i，您可以使用获取相关元素并向其添加一些文本。例如：
foo-bar
火腿肉

var divs=document.getElementsByClassName（'lorem_ipsum'）；
对于（var i=0；i什么决定某事是“错”还是“对”？什么决定某事是“错”还是“对”？OP没有请求jQuery。@David:OP？没有指定环境：）@wkaha这暗示OP没有要求库解决方案，因为问题没有用jQuery标记，他在问题中没有使用jQuery，而且问题很简单。除非OP需要jQuery解决方案，否则不要使用jQuery解决方案。OP没有要求jQuery。@David:OP？没有指定环境：）@wkaha这意味着OP没有要求库解决方案，因为问题没有用jQuery标记，他在问题中没有使用jQuery，而且问题很简单。除非OP希望得到jQuery解决方案，否则不要使用jQuery解决方案。这是相对的。如果将来他/他想错了怎么办？你不能想想现在。网页应该是响应性的，而不是不可维护的标题~“如何在div中改变文本”@哈克胜，如果你打算使用<代码>内文文本< /> >，那么你也必须考虑<代码>文本内容< /代码>。不同的浏览器对这个功能有不同的实现。@哈克胜-“评论”问题中的颜色不同，因此根据克里斯托弗对未来的建议，我将使用一个span。这反过来意味着innerHTML
是最简单的解决方案…@nnnn“I”？你是OP吗？是吗