Проблемы с предложениями при написании HTML в JavaScript

Question

Я пишу HTML структуру в JavaScript, что мне нужно, чтобы вернуться, когда ссылка clicked.I есть это как этот

return '<div class="contactForm">'+ 
'<input type="text" name="contactName" onBlur="if (this.value == "") {this.value == "Name";}" onFocus="if ((this.value == "") || (this.value == "Name")) {this.value = "";};" value="Name" style="">'+ 

Когда я вижу его на странице onBlur атрибут отображается в красный цвет и кавычки неуместны. Я вижу это так на странице.

<input name="contactName" onblur="if (this.value == " ")="" {this.value="Name" ;}"="" onfocus="if ((this.value == " ||="" (this.value="=" "name"))="" ;};"="" value="Name" style="" type="text"> 

Как я могу написать возвратную часть, так что я получить его прямо на странице HTML? Я считаю, что это происходит из-за цитаты получать misplaced.I увидеть эту ошибку в исходном коде страницы увидела цитату, когда ожидает имя атрибута

Answer 1

Вам нужно удвоить кавычки внутри строки с помощью \\\: один раз для самой строки и один раз для встроенного JavaScript.

return '<div class="contactForm">'+ 
    '<input type="text" name="contactName" onBlur="if (this.value == \\\"\\\") {this.value == \\\"Name\\\";}" onFocus="if ((this.value == \\\"\\\") || (this.value == \\\"Name\\\")) {this.value = \\\"\\\";};" value="Name" style="">'+ 

Если вы хотите, чтобы сделать его немного более разборчивым вы можете использовать одинарные кавычки, которые должны быть экранированы только один раз.

return '<div class="contactForm">'+ 
    '<input type="text" name="contactName" onBlur="if (this.value == \'\') {this.value == \'Name\';}" onFocus="if ((this.value == \'\') || (this.value == \'Name\')) {this.value = \'\';};" value="Name" style="">'+ 

Answer 2

var element = '<div class="contactForm">'; 
element += '<input type="text" name="contactName" onBlur="if (this.value == \'\') {this.value == \'Name\';}" onFocus="if ((this.value == \'\') || (this.value == \'Name\')) {this.value = \'\';};" value="Name" style="">'; 
element += '</div>'; 

return element;