How could I add the same string on different paragraph multiple time on the same HTML page?

Question

I wish to know the best way to write only once the same thing and repeat inside the same page. For example:

<div>
    <p id="description1"></p>
</div>
<div>
    <p id="description1"></p>
</div>
--

I wish to write only one time the description1 inside the body. I think this could be achieved using the DOM.

Give them the same class and different IDs. Then, as answered by neuhaus use getElementsByClassName to control it — Eda190, Mar 17 '15 at 12:05
possible duplicate of [How to repeat div using jQuery or JavaScript?](http://stackoverflow.com/questions/16026425/how-to-repeat-div-using-jquery-or-javascript) — Sim1, Mar 17 '15 at 12:15

neuhaus · Answer 1 · 2015-03-17T13:00:19.100

4

Put the elements in the same class using the class attribute, then get the list of all elements using the getElementsByClassName() DOM function. You can then go over the list using a for loop.

[].forEach.call(document.getElementsByClassName("description"), function(elem) {
        elem.innerHTML = "StackOverflow saved my day!";
});

You can even put the text in all elements of the same class using no JavaScript and only CSS by using the content attribute.

edited Mar 17 '15 at 13:00

answered Mar 17 '15 at 12:04

neuhaus

3,886
1
10
27

I don't think you can call `forEach` on a `NodeList` - easy way around this is using `[].forEach.call(document.getElementsByClassName("description"), function() { ... }` – Scott Mar 17 '15 at 12:45
I get this from console `Uncaught SyntaxError: Unexpected token` on `function(elem) {` – NineCattoRules Mar 17 '15 at 12:52

Carl Reid · Accepted Answer · 2015-03-17T13:35:06.410

3

First of all, the ID field should be unique per element.

If you give all the tags a class <p class="description"></p> then you can use jQuery to set them all by calling:

$('.description').text('This is the text')

In javascript:

var elements = document.getElementsByClassName("description");
for (var i = 0; i < elements.length; i++) {
    elements[i].innerHTML = "This is the text.";
}

edited Mar 17 '15 at 13:35

answered Mar 17 '15 at 12:03

Carl Reid

771
11
23

maybe he isn't using jquery... :-) – neuhaus Mar 17 '15 at 12:04
is it the same if I have 2 class? – NineCattoRules Mar 17 '15 at 12:09
1

Yes, it will update all elements that share the same class name. @neuhaus True, true... – Carl Reid Mar 17 '15 at 12:09
1

since getElementsByClassName() returns a list, I don't think you can use innerHTML like that - have you tested it? – neuhaus Mar 17 '15 at 12:11
1

@neuhaus I didn't. Thanks for pointing it out, I've not used plain javascript much before. @Simone Yes, if you mean something like `
` then it will have the red box style and the text will also update.
– Carl Reid Mar 17 '15 at 12:17

score 1 · Answer 3 · edited May 23 '17 at 12:08

1

Have a look at the solutions proposed here How to repeat div using jQuery or JavaScript?

this one seems to work pretty well:

html:

<div id="container">data</div>

js:

var container = document.getElementById('container');

function block(mClass, html) {
    //extra html you want to store.
    return '<div class="' + mClass + '">' + html + '</div>';
}

//    code that loops and makes the blocks.
//    first part: creates var i
//    second:     condition, if 'i' is still smaller than three, then loop.
//    third part: increment i by 1;
for (var i = 0; i < 3; i++) {
    // append the result of function 'block()' to the innerHTML
    // of the container.
    container.innerHTML += block('block', 'data');
}

JSFIDDLE

edited May 23 '17 at 12:08

Community

1
1

answered Mar 17 '15 at 12:16

Sim1

534
4
24

grazie Simone, this is a very nice solution so basically I changed this `for (var i = 0; i < 0; i++) {` – NineCattoRules Mar 17 '15 at 12:26
@Simone seems typo err **for (var i = 0; i < 3; i++)** ..not `i < 0`.:) – theRoot Mar 17 '15 at 12:35
@theRoot I tried with JSFIDDLE i<0 ...in this way if you copy and paste the html code multiple time, you have the same description as reult. Am I missing something? – NineCattoRules Mar 17 '15 at 12:43

Akash Chauhan · Answer 4 · 2015-03-20T12:59:17.703

two elements cannot have same id but can have same class

 <head>
        <script>
            var x = document.getElementsByClassName("description");
            for (var i = 0; i < x.length; i++) {
                    x[i].innerHTML = "This is the text.";
            }
        </script>

        <style>
               .description1 {                    // this will apply the same style to all elements having class as description1
                  text-align: center;
                  color: red;
               }
        </style>
 </head>

    <body>
        <div>
            <p class="description1"></p>
        </div>
        <div>
            <p class="description1"></p>
        </div>
    </body>

See the script tag. this solves your problem

This is not an answer. Write these things into comments rather then answer. — Eda190, Mar 17 '15 at 12:06

score 0 · Answer 5 · answered Mar 17 '15 at 12:15

Just added with a code by using

getElementsByClassName()

`<html>
<body>

<div class="example">First div element with class="example".</div>

<p class="example">Second paragraph element with class="example".</p>

<p>Click the button to change the text of the first div element with class="example" (index 0).</p>

<button onclick="myFunction()">Try it</button>

<p><strong>Note:</strong> The getElementsByClassName() method is not supported in Internet Explorer 8 and earlier versions.</p>

<script>
function myFunction() {
    var x = document.getElementsByClassName("example");
    for(var i=0;i< x.length;i++)
    x[i].innerHTML = "Hello World!";
}
</script>

</body>
</html>`

score 0 · Answer 6 · answered Mar 17 '15 at 12:23

If you wish to keep id, change your code like this :

script :

var pcount = 2// # p
var desc = document.getElementById('description1');
for(i=0; i<pcount;i++){
   document.getElementById('description' + i).innerHTML = desc;
}

html

<div>
 <p id="description1"></p>
</div>
<div>
 <p id="description2"></p>
</div>

How could I add the same string on different paragraph multiple time on the same HTML page?

6 Answers6