javascript - 我有一行，但不知何故我的按钮和文本区域在彼此下方而不是彼此相邻对齐

Question

function getEblockRow() {
    let eBlockRow = ($('<div/>', {
        'class': 'row'
    }));
    console.log(eBlockRow);
    return eBlockRow;
}

function getEblock() {
    let eBlock = ($('<div/>', {
        'class': 'col-md-3'
    }));
    return eBlock;
}

我如何追加:

$(function () {
    $(getEblock().appendTo(getEblockRow()));
    $(getEblock().append(getTextArea(), submitButton())).appendTo('#form');
});

我的控制台显示我确实有一行，但是按钮和 texarea 以某种方式放在彼此下面，我几乎没有 css，所以我不会在那里做错什么。我错过了什么？

Answer 1

Working codepen .

问题在于您将 div 相互附加的方式，检查:

function getEblockRow() {
    let eBlockRow = ($('<div/>', {
        'class': 'row'
    }));
    console.log(eBlockRow);
    return eBlockRow;
}

function getEblock() {
    let eBlock = ($('<div/>', {
        'class': 'col-md-3'
    }));
    return eBlock;
}

$(function () {
    var container = getEblockRow();
    var block = getEblock().append('<textarea></textarea>', '<button class="btn">Submit</button>')

    container.append(block);
    container.append(block.clone(true));
    container.append(block.clone(true));

    $('#form').append(container);
});