0

Пытаюсь использовать <link rel="import" href="..."> и

<script>
  var link = document.querySelector('link[rel=import]');
  var content = link.import.querySelector('#product-card-7');
  document.body.appendChild(content.cloneNode(true));
</script>

Для вставки части другого документа. Вставка происходит. Но не туда куда нужно, а в конец.

Вот пример

Помогите поставить на нужное место. Если можно, пример готового кода scripts. Спасибо.

2 ответа 2

1

appendChild() всегда вставляет элементы в конец.

function insertAfter(newElem, refElem) {
  return refElem.parentNode.insertBefore(elem, refElem.nextSibling);
}

let link = document.querySelector('link[rel=import]'),
    content = link.import.querySelector('#product-card-7'),
    referenceElement = document.querySelector('#product-card-6');

insertAfter(content, referenceElement);

Стоит заметить, что расположение тега <script> не влияет на то, где будет выводиться результат.

1
  • Как все таки должен выглядеть скрипт чтобы вставлять документ например перед .ryad_3 ?
    – Юра
    6 ноя 2018 в 8:03
0

Сработал такой вариант: в index.html div в нужном месте

<link rel="import" href="import.html">
<div class="ryad-2"></div>

в import.html

<div id="ryad">контент</div>
<script>
  var me = document.currentScript.ownerDocument;
  var post = me.querySelector('#ryad');
  var container = document.querySelector('.ryad-2');
  container.appendChild(post.cloneNode(true));
</script>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.