0

Дело в том, что я только начал изучать javascript, и возможно используя фреймворки это можно сделать гораздо проще. До этого я обязательно чуть попозже доберусь. Но сейчас меня интересует такой вопрос: существует ли в нативном js возможность более просто и компактно создавать потомков? Ведь это всего лишь форма слайдера с двумя кнопками, а строчек кода во сколько получилось. Боюсь представить, если нужно будет из скрипта создать какую нибудь форму с кучей полей :)
Подскажите, как это можно реализовать проще?

createForm = function() {
        var elem = document.createElement('div');
        elem.className = 'carousell';
        parentElem.appendChild(elem);
        for (i = 0; i < data.length; i++) {
            var newImage = document.createElement('img');
            newImage.src = data[i];
            elem.appendChild(newImage);
        }

        var buttons = document.createElement('div');
        buttons.className = 'buttons';
        var buttonNext = document.createElement('button');
        buttonNext.class = 'next';
        var buttonPrev = document.createElement('button');
        buttonPrev.class = 'prev';
        buttons.appendChild(buttonPrev);
        buttons.appendChild(buttonNext);
        elem.appendChild(buttons);
        buttonNext.innerHTML = 'Next';
        buttonPrev.innerHTML = 'Prev';

        buttonNext.onclick = nextImage;
        buttonPrev.onclick = prevImage;

        images = document.querySelectorAll('.carousell img');
    }
1
  • Лучше передай на вход html текст. Я в начале тоже пытался с Dom работать ванильным js, но бросил. JQuery решает все вопросы махом и кроссбраузерно. 3 июн 2018 в 3:20

1 ответ 1

-1
var doc = document,
elm = doc.createElement.bind(doc),
all = doc.querySelectorAll.bind(doc),
imgs = ['img1.png', 'img2.png', 'img3.png'],
buts = {'prev':'Prev', 'next':'Next'},
parent = elm('form'),
createForm = () => {
    var elem = elm('div'),
    buttons = elm('div');
    elem.className = 'carousell';
    imgs.forEach(img => {
        im = new Image();
        im.src = img;
        im.alt = '';
        elem.appendChild(im);
    });
    Object.keys(buts).map(key => {
        var button = elm('button');
        button.className = key;
        button.innerText = buts[key];
        buttons.appendChild(button);
    });
    parent.appendChild(elem).appendChild(buttons);
    document.body.appendChild(parent);
    console.log(all('.carousell img'));
};
3
  • стрелочные функции - поддерживаются в старых браузерах ?
    – user33274
    3 июн 2018 в 5:11
  • @МаксимЛенский, нет, а зачем вам старые браузеры? К тому-же, сейчас браузеры обновляются автономно и нет необходимости их держать.
    – And
    3 июн 2018 в 5:25
  • а вдруг кто не будь зайдёт с калькулятора какого не будь :)) а там шляпа будет
    – user33274
    3 июн 2018 в 5:33

Ваш ответ

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

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