Динамическое создание элемента js

Хочу динамически вывести модальное окно, но при выполнении ф-и только header помещается в блок родитель modal__content. В чём может быть проблема.

var View = {
displayModal: function() {
    function displayModalHeader(title) {
        return '<div class="modal__header">' +
            '<div class="modal__title"><h2>' + title + '</h2></div>' +
            '<span class="modal__close">&times</span></div>' +
            '</div>';
    }
    function displayModalBody(inputPlaceholder, textAreaPlaceholder) {
        return '<div class="modal__body">' +
            '<form class="form">'+
            '<input class="form__title" placeholder='+ inputPlaceholder +'>' +
            '<textarea class="form__description" cols="30" rows="7" placeholder='+ textAreaPlaceholder +'></textarea>' +
            '</form>'+
            '</div>';
    }
    function displayModalFooter(btnText) {
        return '<div class="modal__footer">' +
            '<div class="modl__btn-wrap">'+
            '<button class="form__title" placeholder="">'+
            btnText + '<i class="fa fa-long-arrow-right" aria-hidden="true"></i>' +
            '</button>' +
            '</div>'+
            '</div>';
    }
    return '<div class="modal">' +
                '<div class="modal__content">'+ displayModalHeader('Добавить статью') + displayModalBody('sdfsdfs','sdfsdfs') + displayModalFooter('sdfsdfsd')  +
                '</div>' +
            '</div>';
}