HTML / Javascript Dynamic line using HR tag

Question

I have create one flow diagram on user choice. On selecting option a line should be drawn. Line is properly created but it is resetting the option that user selected.

var htmlLine = "<div style='padding:0px; margin:0px; height:" + thickness + "px; background-color:" + color + "; line-height:1px; position:absolute; left:" + cx + "px; top:" + cy + "px; width:" + length + "px;behavior:url(Scripts/-ms-transform.htc); -moz-transform:rotate(" + angle + "deg); -webkit-transform:rotate(" + angle + "deg); -o-transform:rotate(" + angle + "deg); -ms-transform:rotate(" + angle + "deg); transform:rotate(" + angle + "deg);'><hr></div>";
//
//alert(htmlLine);
document.body.innerHTML += htmlLine;

last line is creating some problem. when last line is commented everything is fine.

Please help me...!!!

Answer 1

one problem i see in your code is that you use single quotations on style. You must have something like this : style=".....". You can escape the double quotations by using the '\\' . Your code will look like this : var htmlLine = "<div style=\\"padding:0px;...etc -> the double quotation is escaped by the \\ character