javascript - Attaching text label and/or icon to div

Question

I'm trying to create a div to hold several status messages and/or icons, I'm using dhtmlx, however it should be applicable to general javascript/html/css. StatusBar is the bottom line on the browser.

moUI.statusMain = moUI.layoutMain.attachStatusBar();     // Status bar initialization\setup
moUI.statusMain.id = "statusMain";
moUI.statusMain.setText("<div id=\"toolbarObj\"></div><div style=\"\"><textarea rows=\"1\" cols=\"20\" id=\"status_txt\" type=\"text\" value=\"Initializing.\"><textarea rows=\"1\" cols=\"20\" id=\"operation_txt\" type=\"text\" value=\"COPY\"></div>");

I can then modify the text like this

document.getElementById("status_txt").value = "Done.";

Problem with textarea is that the second area never shows up, they have a scrollbar and if user clicks in the box the browser crashes. if I use input, I get both texts, however I am not really looking for any input, and pure text does not allow me to pinpoint the text I want to modify. Also how do I insert an icon?

Answer 1

感谢 Blazemonger，我得到了一个适合我的解决方案。下面是将文本和图标放置在一行中的绝对位置的代码，允许我在任何给定时间切换文本和图标。

moUI.statusMain.setText("<style type=\"text/css\">  </style><div id=\"toolbarObj\"></div><div><span id=\"status_txt\" style=\"max-width: 400px; position:absolute;left:0;top:0\"> Initializing.</span> <img id=\"status_img\" src=\"" + URL_TOOLBAR_IMAGES + "database.png\" alt=\"\" style=\"max-width: 400px; position:absolute;left:100px;top:0\"/></span><span id=\"operation_txt\" style=\"max-width: 400px; position:absolute;left:200px;top:0;\">COPY</span></div>");
document.getElementById("status_txt").textContent = "Done.";
document.getElementById("operation_txt").textContent = "COPY";