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

Question

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.

If you can't move the input inside the DIV, [**This**](http://jsfiddle.net/3H7uT/) is as close as you'll get. — adeneo, Mar 05 '14 at 11:24
that's why I made the second line longer that the third one. Because I wouldn't really like this result :( — Thanos Darkadakis, Mar 05 '14 at 11:26
If the DIV has it's content set with innerHTML, you can't place anything else inside it, not a span or an input etc. The input has to come after the DIV in the DOM, and then the closest you'll get to having the input on the same line is floating it (or inline-block in modern browsers.) — adeneo, Mar 05 '14 at 11:27
could i get through javascript the position of the end of the word "number" and then change the position of the input element? — Thanos Darkadakis, Mar 05 '14 at 11:29
`#this_can_be_updated { display: inline; }` is the way to go with CSS: http://jsfiddle.net/3H7uT/1/. — VisioN, Mar 05 '14 at 11:29
^^ There you go, just setting it to `inline` floats the input nicely where the text ends. @VisioN solved it. — adeneo, Mar 05 '14 at 11:32
@VisioN if you can add this as an answer so that i can accept — Thanos Darkadakis, Mar 05 '14 at 11:40

score 3 · Accepted Answer · answered Mar 05 '14 at 11:41

3

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/

answered Mar 05 '14 at 11:41

VisioN

143,310
32
282
281

you are right, i even didn't read the question properly, i was solving as placing new control at some point of text. – Vinay Pratap Singh Bhadauria Mar 05 '14 at 11:44
@Rex Even with that it was horrible. You shouldn't really work with DOM elements as with strings. It always reminds me of this: http://stackoverflow.com/a/1732454/1249581. – VisioN Mar 05 '14 at 11:46

score 1 · Answer 2 · answered Mar 05 '14 at 11:31

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">

score 1 · Answer 3 · answered Mar 05 '14 at 11:53

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;
}

Thanks, that's also good. let me ask a side question: My input has no border, so you can see the whole div as a text. However, if I try to center-align the whole div, then the last line will not be aligned because of the width of the input-element. I assume there is no way to fix this. — Thanos Darkadakis, Mar 05 '14 at 12:33

score 0 · Answer 4 · answered Mar 05 '14 at 11:25

0

Try this with Jquery:

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

Hope that help

answered Mar 05 '14 at 11:25

Mazeltov

541
5
18

Gaz · Answer 5 · 2014-03-05T11:41:22.347

0

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

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

edited Mar 05 '14 at 11:41

answered Mar 05 '14 at 11:35

Gaz

101
1
13

no. the text inside the div is updated. So next time the last line could be longer or shorter – Thanos Darkadakis Mar 05 '14 at 11:44

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

5 Answers5