Javascript блок котировок

Question

var circle; 
    var love = 30; 

     document.getElementById("output"). innerHTML=(" 

    The Circle is __ Units with an Area of __ 
        <svg version='1.1' 
     width='360' height='300' 
     xmlns='http://www.w3.org/2000/svg'> 

      <circle cx='50%' cy='50%' r='" + love + " %' stroke='black' 
      stroke-width='2' fill='red'/> 
     </svg>"); 

Я знаю, что здесь есть синтаксическая ошибка, и я уверен, что это связано с множеством кавычек в блоке. Должен ли я сделать это в меньшие строки и объединить их. Вид как. = С PHP? (Вся точка блока установить радиус SVG {г} к переменной любви.) - Спасибо Джош

Edit 2 # (Спасибо Сообществ поддержки, Вот некоторые интересные аккуратным Рабочий код)

  var love = 30; 
      var va1 = "The Circle is __ Units with an Area of __ "; 
        var va2 =" <svg version='1.1' width='360' height='300' xmlns='http://www.w3.org/2000/svg'>" ; 
        var va3 = " <circle cx='50%' cy='50%' r='" ; 
        var va4 = "%' stroke='black' stroke-width='2' fill='red'/> </svg>"; 
        document.getElementById("output"). innerHTML=(va1+ va2 + va3 + love +va4); 

Answer 1

Используйте символ \ побег для нескольких строк линии

Как это

var circle; 
var love = 30; 

    document.getElementById("output"). innerHTML=(" \ 
     The Circle is __ Units with an Area of __ \ 
       <svg version='1.1' \ 
       width='360' height='300' \ 
       xmlns='http://www.w3.org/2000/svg'> \ 
       <circle cx='50%' cy='50%' r='" + love + "%' stroke='black' \ 
       stroke-width='2' fill='red'/> \ 
       </svg>"); 

Answer 2

Я бы честно избежать конкатенацию, маркеры конца-строки, и только в Буе Эти элементы. Код, на мой взгляд, был бы гораздо менее хрупким, а также легче на глазах. Это то, что я сделал ниже, включая небольшую вспомогательную функцию для сопоставления членов объекта буквальным к атрибутам моих элементов:

Посмотреть он-лайн: http://jsfiddle.net/jonathansampson/er9ys/

// References and values we'll be needing 
var out = document.querySelector("body"), 
    nsp = "http://www.w3.org/2000/svg", 
    lov = 30; 

// Build our message, svg element, and circle 
var msg = document.createTextNode("Circle is _ Units, w/ an Area of _"); 
var svg = makeEl(nsp, "svg", { version: 1.1, height: 300, width: 360 }); 
var ccl = makeEl(nsp, "circle", { cx: "50%", cy: "50%", r: lov + "%" }); 

// Add children to appropriate parents 
svg.appendChild(ccl); 
out.appendChild(msg); 
out.appendChild(svg); 

// Small utility for adding attrs 
function makeEl (namespace, tag, attrs) { 
    var el = document.createElementNS(namespace, tag), prop; 
    for (prop in attrs) 
     el.setAttribute(prop, attrs[prop]); 
    return el; 
}