why css is not applied in variable using jquery?

Question

I can you please tell me why my css is applied in my variable. when I write like this

 html+='<div>'+tenLengthString+'</div>';

fiddle: http://jsfiddle.net/yzaaJ/5/ it show my contend in row.but I need to show timestamp in all row.At every row I need to show timestamp.So I change my variable .

 html+='<div style=width:60%; float:left;><b>'+ hours + ":" + minutes + ":" +  seconds+'</b></div><div style=width:40%; float:left; text-align:right; ><b>'+ 1 +'&nbsp;&nbsp;&nbsp;&nbsp;</b></div></div><div>'+tenLengthString+'</div>';

fiddle http://jsfiddle.net/yzaaJ/6/

but it look different .how can i display timestamp in front of each row ?

var words = str.split(" ");
var tenLengthString = "";
var html='';
for(var index = 0; index < words.length; index++)
{
    var currentWord = words[index];
    var currentLength = tenLengthString.length;    
    if(((currentLength + currentWord.length + ((currentLength > 0) ? 1: 0))) > 30)
    {        
        html+='<div style=width:60%; float:left;><b>'+ hours + ":" + minutes + ":" +  seconds+'</b></div><div style=width:40%; float:left; text-align:right; ><b>'+ 1 +'&nbsp;&nbsp;&nbsp;&nbsp;</b></div></div><div>'+tenLengthString+'</div>';
        console.log(tenLengthString);        
        tenLengthString = currentWord;        
    } else {
        if(currentLength > 0)
            tenLengthString += " ";    
        tenLengthString += currentWord;
    }    
    if(index == words.length - 1){
      console.log(tenLengthString);
       html+='<div>'+tenLengthString+'</div>';

    }        
}
$("#test").html(html)

You should be very careful when concatenating data and html. For example what if `tenLengthString` contains html tags? — zord, Mar 19 '14 at 17:49
in demo i use static data but in real example I have streaming live.I think the best way to take div — , Mar 19 '14 at 17:49
You dont need to detect the html. You could use this: http://stackoverflow.com/questions/24816/escaping-html-strings-with-jquery — Raul Guiu, Mar 19 '14 at 18:46
I agree with @Avempace. You don't want to detect html, you want to escape it. — zord, Mar 20 '14 at 08:40

score 0 · Answer 1 · answered Mar 19 '14 at 18:00

Enclose style in double quotes :style=""
inner 'line-item level div's should be inline-block
containing 'row level' div need opening tag
lose the float styles
Adjust styles to clean up the row.
Consider using CSS to style the div's you are concatenating <div class="">

score 0 · Answer 2 · answered Mar 19 '14 at 18:02

You could simplify it a bit by separating the css. I also would prefer to create a list than so many divs.

html+='<li><span class="timestamp">'+ hours + ":" + minutes + 
   ":" +  seconds+'</span><span class="number">'+ 1 +
   '</span>'+tenLengthString+'</li>';

The css could be(for example):

li {
    list-style: none;
}

.timestamp {
    width:20%; 
    float: left;    
    font-weight: bold;
}

.number {
    float: left;
    text-align:left;
    width:20%;
    font-weight: bold;
}

And the jsfiddle

score 0 · Answer 3 · answered Mar 19 '14 at 18:03

I think you forgot the double quote on the style attributes.

 html+='<div style="width:60%; float:left;"><b>'+ hours + ":" + minutes + ":" +  seconds+'</b></div><div style="width:40%; float:left; text-align:right;" ><b>'+ 1 +'&nbsp;&nbsp;&nbsp;&nbsp;</b></div></div>

Sorry can't save on jsfiddle.

why css is not applied in variable using jquery?

3 Answers3