Javascript 为什么不使用jquery在变量中应用css？

我可以请你告诉我为什么我的css应用在我的变量。 当我这样写的时候

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

html+=''+tenLengthString+''；

小提琴： 它在行中显示我的竞争。但我需要在所有行中显示时间戳。在每一行中，我需要显示时间戳。所以我更改了变量

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

html+=''+hours+''：“+minutes+”：“+seconds+''+1+''+tenLengthString+”；

拨弄

但它看起来不同。我如何在每行前面显示时间戳

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)

var words=str.split（“”）；
var tenLengthString=“”；
var html=''；
对于（var索引=0；索引0）？1:0）））>30）
{        
html+=''+hours+''：''+minutes+''：''+seconds+''+1+''+tenLengthString+''；
console.log（tenLengthString）；
tenLengthString=当前字；
}否则{
如果（当前长度>0）
tenLengthString+=“”；
tenLengthString+=当前字；
}    
if（index==words.length-1）{
console.log（tenLengthString）；
html+=''+tenLengthString+''；
}        
}
$（“#测试”）.html（html）

用双引号将样式括起来：

style=”“

内部“行项目级别div”应为内联块

包含“行级别”div需要开头标记

丢失浮动样式

调整样式以清理行

考虑使用CSS来设置要连接的div的样式

---

您可以通过分离css来简化它。我也更喜欢创建一个列表，而不是这么多div

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

---

我想你忘了样式属性上的双引号了

 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>

html+=''+hours+：''+minutes+：''+seconds+''+1+'

---

抱歉，无法在JSFIDLE上保存。

不使用列表的原因是什么？在连接数据和html时应该非常小心。例如，如果

tenLengthString

包含html标记，该怎么办？在演示中，我使用静态数据，但在实际示例中，我使用了流媒体直播。我认为最好的方法是使用div，您不需要检测html。你可以用这个：我同意@Avempace。你不想检测html，你想逃避它。

 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>