Question

我有一个HTML页面如下：

<html>
    <body>
         <div id="emaildiv" class="main" style="width:150px;height:80px;"></div>
    </body>
</html>

我想动态地添加一个带有TEXT和BUTTON的DIV。所有这些都是通过使用以下javascript制作的。

function newEmailForContact() {
    var parentDiv = document.getElementById('emaildiv');
    var newEmailDiv = document.createElement('div');
    newEmailDiv.setAttribute('id','newEmailDiv');
    newEmailDiv.setAttribute('style', 'display:table;');

    var newEmail = document.createElement('INPUT');
    newEmail.setAttribute('type','text');
    newEmail.setAttribute('name','newEmail');
    newEmail.setAttribute('class', 'textfield_addemail');
    newEmail.setAttribute('id','newEmail');

    var addEmailBtn = document.createElement('INPUT');
    addEmailBtn.setAttribute('type','button');
    addEmailBtn.setAttribute('name','addEmail');
    addEmailBtn.setAttribute('id','addEmail');
    addEmailBtn.setAttribute('value', 'Add');
    newEmailDiv.appendChild(newEmail);
    newEmailDiv.appendChild(addEmailBtn);

    parentDiv.appendChild(newEmailDiv);
}

但是TEXT和按钮显示在两个不同的行中。

编辑： - CSS类： -

.textfield_addemail    {
    border-width: 1px;
    border-style: solid;
    border-color: #999999;
    background-repeat: repeat-x;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333333;
    width: 120px;
    height: 15px;
    }

我想在同一行显示两者。任何解决方案？

Answer 1

问题是您的初始<div>在150px时不够宽，只需稍微增加一点，如下所示：

<div id="emaildiv" class="main" style="width:250px;height:80px;"></div>

You can see a working/updated example with only this change here

Answer 2

忽略

newEmailDiv.setAttribute('style', 'display:table;');

然后，您的span将显示为内嵌，您的按钮应显示在其旁边

在不同的行中显示两个动态添加的元素

2 个答案: