使用 JavaScript 更改所有 <pre> 标记的内容答案

【问题标题】：Changing the content of all <pre> tags using JavaScript使用 JavaScript 更改所有 <pre> 标记的内容
【发布时间】：2013-02-10 13:42:06
【问题描述】：

我想知道如何更改文档中的所有前置标记...

我正在使用这个：

var preContent = document.getElementById('code').innerHTML;

但这只会改变 1 个 pre 标记的内容……ID 为“code”的那个。

如果你能告诉我如何使用 JavaScript 更改所有 pre 标签，我很感激

所有代码如下：

window.onload = function () {
    var preContent = document.getElementById('code').innerHTML;
    var codeLine = new Array();
    var newContent = '<table width="100%" border="1" ' 
        + 'cellpadding="0" cellspacing="0" >';

    codeLine = preContent.split('\n');
    for (var i = 0; i < codeLine.length; i++) {
        newContent = newContent + '<tr><td class="codeTab1" >' 
            + i.toString() + '</td><td class="codeTab2">' 
            + codeLine[i] + '</td></tr>';
    }
    newContent = newContent + '</table>';

    document.getElementById('code').innerHTML = newContent;
}

PS：这是为了让行前的数字看起来像一个普通的编译器 PPS：每个 pre 标签都会有不同的内容，我想要相同的脚本来改变它（如果可能的话）。

【问题讨论】：

感谢詹姆斯麦克劳克林！这是使用您的建议的解决方案！ pastebin.com/qYAFVkGD

标签： javascript html css tags pre

【解决方案1】：

你可以使用getElementsByTagName:

var preElements = document.getElementsByTagName('pre');

for(var i = 0; i < preElements.length; ++ i)
{
    var element = preElements[i];

    /* modify element.innerHTML here */
}

【讨论】：

【解决方案2】：

代码中的第一个问题。文档中的两个元素不能有相同的 id。

因此您可以使用 jquery 轻松更改它。看代码。

$('pre').html("what ever text you want to show ");

或者使用 javascript 你可以这样做：

var x = document.getElementsByTagName('pre');
for(var i = 0; i < x.length; ++ i)
{
   x.innerHTML = "what ever text you want to show";
}

【讨论】：