CODEWITHSUNDEEP
javascripthtmlcss
Thanos Darkadakis
Thanos Darkadakis

Reputation: 1729

How can I place an element JUST after div's text?

I am looking for a way to place the input control just after the word "number" (in the same line). 

<!DOCTYPE html>
<html>
<body>
<div id="this_can_be_updated">
    Hello.<br/>
    This is some text. I need to put in the third line<br/>
    the number
</div>
<input type="text" value="5">
</body>
</html>

Can this be done with css? With any other way?

Limitation: The div.innerHtml is updated dynamically with javascript (using its id). So i guess i cannot put the input tag inside the div.

Upvotes: 0

Views: 502

Answers (5)

Narendra
Narendra

Reputation: 3117

Answer provide by VisioN is correct. But I would like to add some more points.

If you actually want to add some element at the end of <div> tag, then it is better to use <span> tag. Because is a block element.

You can replace your html with below mentioned html if using div is not mandatory.

<div>
    <span id="this_can_be_updated">
    Hello.<br/>
    This is some text. I need to put in the third line<br/>
    the number
    </span>
    <input type="text" value="5">
</div>

The above html will let you change the content of span by using the id and also show the input field at the end of the text.

There is another scenario. Ideally no two elements should have same id in a html page. But there may be a chance that two elements have the same id this_can_be_updated. In this case following code is little safer

div#this_can_be_updated {
    display: inline;
}

Upvotes: 1

VisioN
VisioN

Reputation: 145478

The best way to do it is to set display: inline style to your <div> element:

#this_can_be_updated {
    display: inline;
}

DEMO: http://jsfiddle.net/3H7uT/1/

Upvotes: 3

Gaz
Gaz

Reputation: 117

Taking adeneos answer, you could minus the margin of the text box like this?

style="margin-left:-200px;"

Upvotes: 0

Thangadurai
Thangadurai

Reputation: 2621

You can apply display CSS property to show the text box immediately after the div contents.

<div id="this_can_be_updated" style='display:inline'>
    Hello.<br/>
    This is some text. I need to put in the third line<br/>
    the number
</div>
<input type="text" value="5">

Upvotes: 1

Mazeltov
Mazeltov

Reputation: 551

Try this with Jquery:

$("#this_can_be_updated").append( "<p>Test</p>" );

Hope that help

Upvotes: 0

Related Questions