如何“抓取”类标记内的内容并仅使用javascript显示内容?

时间:2014-02-19 02:04:01

标签: javascript html css

我不确定自己是否朝着正确的方向前进,但我想要实现的目标相当复杂,至少对我而言。所以我要找的是在html类标签内找到内容并在任何我想要的地方显示这些内容。让我们以网站上的在线产品为例,假设标题上的代码编写如下:

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

是的,我知道我可以使用这样的变量:

 < h2>$title< /h2> 
但是如果没有访问权限呢?是否有可能使用以下方法获取详细信息:getElementByClassName 然后显示那些内容?我一直在寻找,我很遗憾没有得到任何东西,所以决定在这里问。

HTML:

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

风格:     

 
    #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; }

脚本:

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

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

以下是JsFiddle

1 个答案:

答案 0 :(得分:1)

HTML

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

这是脚本

<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>

代码本身非常不言自明