TransWikia.com

Как клонировать элементы?

Stack Overflow на русском Asked on November 7, 2021

Как можно клонировать элементы ? сейчас есть массив с 2мя картинками. Нужно что бы если я загрузил ,например в массив еще N картинок то элементы копировались в зависимости от количества загруженных элементов

https://codepen.io/camobap6/pen/jOWXjbB

let pictures=[ 'https://images.unsplash.com/photo-1595172150339-2096662f8bbf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80', 
'https://images.unsplash.com/photo-1595172150339-2096662f8bbf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80', 
];

let parent = document.getElementById('parent');
let elem = parent.querySelector('.elem');

let clone = elem.cloneNode(true);
parent.appendChild(clone);

const elements = document.querySelectorAll('.elem')
elements.forEach((el, i) => {
  let img = document.createElement('img');
  img.src = pictures[i]
  el.append(img)
})
.parent{
  border:solid red 1px;
  width:600px;
  height:400px;
  display:flex;
  flex-wrap:wrap;
  
}
.elem{
  width:200px;
  height:200px;
 border:solid red 1px;
    background-size: cover;
  background-position: center;
  overflow: hidden;
}
<div class="parent" id="parent">
    <div class="elem">
    </div>
</div>

One Answer

<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .parent{
            border:solid red 1px;
            width:600px;
            height:400px;
            display:flex;
            flex-wrap:wrap;

        }
        .elem{
            width:200px;
            height:200px;
            border:solid red 1px;
            background-size: cover;
            background-position: center;
            over
    </style>
</head>
<body>
<div class="parent" id="parent">

</div>

</body>
<script type="text/javascript">
    let pictures=[ 'https://images.unsplash.com/photo-1595172150339-2096662f8bbf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80',
        'https://images.unsplash.com/photo-1595172150339-2096662f8bbf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80',
        'https://images.unsplash.com/photo-1595172150339-2096662f8bbf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80',
        'https://images.unsplash.com/photo-1595172150339-2096662f8bbf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80'
    ];

//---------------------Доп функции для построения dom-------------------------------
    // Функция строит div в котором img
    create_div = function (obj){
        let elem = document.createElement('div');
        if(obj.id!=undefined){elem.id=obj.id};
        if(obj.className!=undefined){elem.className=obj.className};
        return elem
    }
    // Функция строит img
    create_image = function (obj){
        let elem= document.createElement('img');
        if(obj.className!=undefined){elem.className=obj.className};
        if(obj.id!=undefined){elem.id=obj.id};
        if(obj.src!=undefined){elem.src=obj.src};
        if(obj.width!=undefined){elem.width=obj.width};
        if(obj.height!=undefined){elem.height=obj.height};
        if(obj.title!=undefined){elem.title=obj.title};
        return elem
    }
    // Функция строит собирает div и img вместе
    create_div_blok = function(obj,obj1){
        let div =create_div(obj);
        div.appendChild(create_image(obj1));
        return div;
    }
//-------------------------------------------------------------------------------
    // Задает параметры блока elem
    obj = {
        "id": undefined,
        "className": "elem",
        "name":undefined
    }
    // строим вертуальный dom
    let frag = document.createDocumentFragment()

    // перебираем массив и строим блок с картинками
    for (q = 0; q < pictures.length; ++q) {
        // Задает параметры блока img
        obj1 = {
            "id": "",
            "src": pictures[q],
            "title": 50,
            "width":70,
            "height":44,
            "title":"kjj",
        }
        //добовляем сформированный div в вертуальный dom
        frag.appendChild(create_div_blok(obj, obj1));
    }

    var container = document.getElementById("parent");
    //Вставляем созданый вертуальный dom в div c id="parent"
    container.appendChild(frag);

</script>
</html>

Твой подход с cloneNode, не совсем подходит в такой истории. Суть кода состоит в том чтоб в цикле перебрать массив pictures.И в момент перебора формировать div а внутри img. Так что алгаритм задачи таков, а реализовать его можно многими спосабами.Css не трогал и не оформлял.Скрипт формирует количество div с img в зависимости от массива pictures

Answered by Андрей Солуянов on November 7, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP