Как «захватить» содержимое внутри тега класса и отобразить содержимое, используя только JavaScript?

0

Я не уверен, что я нахожусь в правильном направлении, но то, чего я пытаюсь достичь, довольно сложно, по крайней мере для меня. Итак, я ищу, чтобы найти содержимое внутри тега класса 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%; снизу: 10%; right: 50%; право: 50%; font-weight: bold; font-weight: bold; } }

Автор сценария: 
var displayThys = document.getElementByClassName("displayThis");

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

Вот JsFiddle

  • 2
    Во-первых, не уверен, почему вы хотите хранить контент внутри класса, но все в порядке. Во-вторых, вы хотите добиться этого с помощью чистого JS или JQuery приемлемо?
  • 0
    Вы используете JQuery или нет? Вы включили его в свой тег, но в своем коде вы используете vanilla JS.
Показать ещё 2 комментария
Теги:

1 ответ

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>

Сам код вполне понятен

Поделиться
  • 0
    Гораздо проще просто клонировать узел и присоединить его к DOM, как брата, например, в цикле for: displayAgain.parentNode.appendChild(displayAgain.cloneNode(true)); , QED :-) Обратите внимание, что NodeList, созданный getElementsByClassName, является живым, так что это создаст бесконечное количество клонов. Лучше хранить значение i , чем получать его каждый раз.
  • 0
    Да, это создавать бесконечные клоны. Так что же делать с ними, если бы вы могли легко добавить текст, используя innerHTML, к новому элементу с другим классом? Я не понимаю, нуб здесь: D
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню