html - Changing the content of all <pre> tags using JavaScript - Stack Overflow

admin管理员组

文章数量:1314349

I want to know how I change all the pre tags inside a document...

I'm using this:

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

but this only changes the content of 1 pre tag... the one with the ID 'code'.

If you can show me how i can change all the pre tags using JavaScript I appreciate

Here's all the code:

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: This is to make a look like a normal piler with numbers before the line PPS: Each pre tag will have a different content and I want the same script to change it (if possible).

I want to know how I change all the pre tags inside a document...

I'm using this:

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

but this only changes the content of 1 pre tag... the one with the ID 'code'.

If you can show me how i can change all the pre tags using JavaScript I appreciate

Here's all the code:

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: This is to make a look like a normal piler with numbers before the line PPS: Each pre tag will have a different content and I want the same script to change it (if possible).

• javascript
• html
• css
• tags
• pre

Share Improve this question Follow edited Feb 10, 2017 at 16:47 isherwood 61.1k1616 gold badges121121 silver badges169169 bronze badges asked Feb 25, 2013 at 12:03 Bruno PinhoBruno Pinho 8511 gold badge11 silver badge55 bronze badges 1

• Thanks James McLaughlin! Here is the solution using your advice! pastebin./qYAFVkGD – Bruno Pinho Commented Feb 25, 2013 at 12:53

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You can use getElementsByTagName:

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

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

    /* modify element.innerHTML here */
}

First problem in you code . No two elements in a document can have same id .

So you can change it easily with jquery . look at the code .

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

Or with javascript you can do like this :

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

本文标签： htmlChanging the content of all ltpregt tags using JavaScriptStack Overflow