Displaying two dynamically added elements in different rows
I've an HTML page like following:
<html>
<body>
<div id="emaildiv" class="main" style="width开发者_C百科:150px;height:80px;"></div>
</body>
</html>
I want to add a DIV with a TEXT and BUTTON in to it dynamically. All these are made by using the following 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);
}
But the TEXT and Button are displayed in two different rows.
EDIT :- CSS class :-
.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;
}
I want to display both in same row. Any solution?
The problem is your initial <div> isn't wide enough at 150px, just increase the size a bit, like this:
<div id="emaildiv" class="main" style="width:250px;height:80px;"></div>
You can see a working/updated example with only this change here.
Leave out the
newEmailDiv.setAttribute('style', 'display:table;');
Then your span will be displayed as inline and your button should appear next to it
加载中,请稍侯......
精彩评论