CODEWITHSUNDEEP
javascripthtmlcss
Mee
Mee

Reputation: 158

How to "grab" contents inside a class tag and display the content using only javascript?

I am not sure if I am on the right direction, but what I am trying to achieve is quite complexe, at least to me. So What I am looking for is to find the content inside a html class tag and display this content wherever I want. Lets take an example of an online product on a website, and supposing that on the title the code is written as following: 

< h2 class="Title">This is a product example< /h2>|| note the space had
  to be to show the exact code.

Yes, I know that i could just use the variable like: 

 < h2>$title< /h2>
But what if don't have access to it? Is there any chance of getting them details using :getElementByClassName And then display that content? I have been looking all over and I, unfortunately got nothing, therefore decided to ask here.

HTML: 

<div id="container"> ABC <br />
<p class="displayThis"> I want this to be displayed again
using only JavaScript </p
</div>

Style: 

 
    #container {
    border: 1px solid;
    width: 200px;
    margin-left: 15%;
    background: #999;
    border-color: #fc0000;
    text-align: center;
   }
.displayThis {
    background: #999;
    color: #fff;
    font-weight: bold;
}



.newContent {
    position: fixed;
    bottom: 10%;
    right: 50%;
    font-weight: bold;
}
Script:

var displayThys = document.getElementByClassName("displayThis");

document.write('\<p class="newContent">'+ displayThys +'</p>\ <br />\ ');

Here is the JsFiddle

Upvotes: 0

Views: 1978

Answers (1)

rzkio
rzkio

Reputation: 298

HTML

<div id="container"> ABC <br />
    <p class="displayThis"> I want this to be displayed again using only JavaScript </p>
</div>

And here is the script

<script>
    (function(){
        var a = document.getElementsByClassName("displayThis");

        for (var i = 0; i < a.length; i++) {
        var displayAgain = a[i];
        document.write('\<p class="newContent">'+ displayAgain.innerHTML +'</p>\ <br />\ ');

        }
    })();
</script>

The code itself is quite self-explanatory

Upvotes: 1

Related Questions