Как скопировать div внутри html (желательно с параметрами)?
 

Добрый день,

разрабатываю одностраничник в виде веб-интерфейса аппаратуры, в котором уже больше 100 страниц документации. Примерно 40% этой документации повторяется.

Документация вся расположена в

<div id=Label_1> ..... </div>

мне хочется скопировать внутри html все содержимое из <div id=Label_1> куда-то дальше.

Пока я это делал так:

<div id="Label_1_cp" ></div> <script>CP("Label_1_cp","Label_1");</script>

где-то вверху написав

function CP(a,b) { document.getElementById(a).innerHTML=document.getElementById(b).innerHTML; }

Скажите, пожалуйста, а можно ли скопировать содержимое какого-то div в заданное место как-то еще короче, не заводя новый id= и не вызывая JS? То есть хочется что-то типа:

<div XXX=Label_1></div>

но я не знаю, как XXX называется, подскажите, пожалуйста!

Очень часто надо еще сложнее конструкцию, у меня в документации есть пара параметров, которые надо поменять при копировании.

Вот если бы я писал в ЛаТеХе или на гипотетическом С для браузера, то я бы завел define с параметрами, и раскрывал бы этот define в нескольких местах.

Скажите, пожалуйста, а можно в html тоже так сделать?

Спасибо!

Ну я бы вам советовал использовать сборку и компонентный подход.
Красиво по папочкам разложить куски, а потом импортировать их где надо. Но это потребует более глубокого изучения.
Попробуйте заюзать Vue, он довольно лёгок для понимания и применения.
Если нет - попробуйте шаблонизаторы по-проще, тот же handlebars например.
Ну а пока вот вам функция которая после загрузки ищет все элементы с одинаковым атрибутом data-id на странице и заполняет пустые из полных: https://jsfiddle.net/Lwoetghq/1/ :)

addEventListener('DOMContentLoaded', function() {
  var forEach = Function.prototype.call.bind(Array.prototype.forEach);
  var attribute = 'data-id';
  var map = {};
  forEach(document.querySelectorAll('[' + attribute + ']'), function(element) {
    var id = element.getAttribute(attribute);
    if(!map[id]) map[id] = [];
    if(element.hasChildNodes()) {
      var fragment = document.createDocumentFragment();
      forEach(element.childNodes, function(node) {
        fragment.appendChild(node.cloneNode(true));
      });
      if(map[id].parent) {
        console.warn('[Два не-пустых элемента с одинаковым %s: %o и %o]', attribute, map[id].parent, element)
      }
      map[id].parent = element;
      map[id].fragment = fragment;
    } else {
      map[id].push(element);
    }
  });

  for(var id in map) {
    var fragment = map[id].fragment;
    if(fragment) {
      map[id].forEach(function(element) {
        element.appendChild(fragment.cloneNode(true));
      })
    }
  }
})

P.S. По написанию доков мне больше всего понравилась сборка из отдельных файлов маркдауна с кастомными расширениями в живой сайт(пример), но это ещё более хитрая вещь.)

Спасибо большое, Aetae,

сборку пока частично сам делаю, а плодить файлы не хотел, так как у меня похоже на приборе не будет полноценного веб сервера, я планировал просто по входу на IP посылать один единственный файл, что зашит в приборе и далее общаться только сокетами. По крайней мере именно так у меня все сейчас организовано.

Заметил, что в основном у меня просто копируются куски текста.
То есть текст где-то в начале лежит в одном div, и мне надо его потом несколько раз встроить где я хочу.

Иметь метку на каждый текст - не проблема.

Пока доупрощал до состояния:

<div id=Label_1> ..... </div>

<div id="Label_1_0"></div><script>CP(1,0);</script>

где

function CP(a,n) { document.getElementById("Label_"+a+"_"+n).innerHTML=document.getElementById("Label_"+a).innerHTML; }

основной проблемой является то, что каждый раз надо дописывать свой уникальный номер:

<div id="Label_1_0"></div><script>CP(1,0);</script>

...

<div id="Label_1_1"></div><script>CP(1,1);</script>

...

<div id="Label_1_2"></div><script>CP(1,2);</script>

...

<div id="Label_1_3"></div><script>CP(1,3);</script>

и хочется это избежать, иначе будет путаница при редакции.

В принципе могу парсер написать и присваивать такой номер автоматически.

Но, как-то не логично, что в html нет возможности воткнуть содержимое в div из другого или вызвать при создании специальную функцию, которая сделает такое копирование.

Вдруг кто-то что-то похожее знает, пожалуйста, подскажите!

Спасибо!

вам же дали готовое решение, см. пример в #2, что не так?

дублирование содержимого в другие блоки
 

Was-Ja,
попытка облегчить понимание решения, предложенного Aetae, :)

<!DOCTYPE html>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    </style>

    <script>
addEventListener('DOMContentLoaded', function() {
    var forEach = Function.prototype.call.bind(Array.prototype.forEach);
    var attribute = 'data-for';
    forEach(document.querySelectorAll('[' + attribute + ']'), function(element) {
        var cls = element.getAttribute(attribute);
        var fragment = document.createDocumentFragment();
            forEach(element.childNodes, function(node) {
                fragment.appendChild(node.cloneNode(true));
            });
        forEach(document.querySelectorAll(cls), function(element) {
        element.appendChild(fragment.cloneNode(true))
        })

    });
})
   </script>
</head>

<body>
<div class="add"></div>
<div  data-for='.label, .test' >это пример, будет во всех <b>div</b> с классами указанными в атрибуте <i>data-for</i>'.label, .test'</div>
<div class="label"></div>
<div class="label"></div>
<div class="label"></div>
<div class="label"></div>
<div class="red">а тут ничего не изменится</div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="add"></div>
<div  data-for='.add' >это пример, будет во всех <b>div</b> с классами указанными в атрибуте <i>data-for</i>'.add'</div>
</body>
</html>

Я тормоз, я зациклился на одном и том же id у дива, и поэтому не смог понять пример Aetae, а, оказывается, это все делалось через одинаковые классы, которые задаются через data-for. Теперь понял! Простите, пожалуйста, тормоза!

СПАСИБО ОГРОМНОЕ!!! Именно то, что хотелось!