CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Paul Wesgers
Paul Wesgers

Reputation: 35

jQuery and label input

<div id="one">
    <label for="number">Number</label>
    <div id="two">
        <input id="number" type="text" name="number">
    </div>   
</div>

This show me:

  1. Number
  2. [input]

How can I make:

  1. Number [input]

How can I modify this with jQuery? (not modify html)

LIVE: http://jsfiddle.net/UBx6p/

Upvotes: 0

Views: 210

Answers (4)

bloodcell
bloodcell

Reputation: 601

Well, you really should change the HTML as stated above by Xavi.

If that is out of the question, you can perform the HTML changes via jQuery:

$('#one label').css('float', 'left');
$('#one #two').css('float', 'left');
$('#one #two').css('margin-left', '5px');
$('#one').append('<div style="clear:both"></div>');

put it here : http://jsfiddle.net/UBx6p/8/

Upvotes: 1

Jan Pfeifer
Jan Pfeifer

Reputation: 2861

If you want it only in JS. Then as suggested use something like this

document.getElementById('two').style.display = 'inline';

Upvotes: 1

Xavi L&#243;pez
Xavi L&#243;pez

Reputation: 27880

Use a <span> instead of a <div>.

<div id="one">
    <label for="number">Number</label>
    <span id="two">
        <input id="number" type="text" name="number">
    </span>   
</div>

Upvotes: 2

Oliver
Oliver

Reputation: 11617

Can you use CSS rather than javascript?

#two {
    display:inline-block;
}

Upvotes: 1

Related Questions