При объединении строк, чтобы собрать новый элемент DOM с Javascript, он принимает только первое значение, разделенное пробелами

Question

У меня есть следующий код

var aVar = "sample text";
alert(aVar);
$(this).replaceWith( "<input type='text' value=" + aVar + " id='laID' style='width: 100px; padding-right:20px; color:white;'/>");

Окно сообщения с предупреждением возвращает ожидаемое значение: «образец текста».Однако элемент DOM генерируется со следующим значением: «sample».Теперь, если я попытаюсь сделать это следующим образом:

$(this).replaceWith( "<input type='text' value='sample text' id='laID' style='width: 100px; padding-right:20px; color:white;'/>");

К сожалению, у меня нет выбора, кроме как прочитать значение из переменной, я не могу его жестко закодировать.Надеюсь, кто-то может направить меня с этим!thankss

Answer 1

Меняем:

value=" + aVar + " id='

Кому:

value='" + aVar + "' id='

Атрибуты должны быть в кавычках.

Answer 2

Вам не хватает кавычек. Используйте это:

$(this).replaceWith( "<input type='text' value='" + aVar + "' id='laID' style='width: 100px; padding-right:20px; color:white;'/>");

Answer 3

Вы не указали в строке значение атрибута value в первом примере. Следует написать:

$(this).replaceWith( "<input type='text' value='" + aVar + "' id='laID' style='width: 100px; padding-right:20px; color:white;'/>");

Answer 4

Все уже ответили на ваш вопрос, но ... когда вы застряли с подобными строковыми ошибками, просто используйте "alert", чтобы увидеть оцененную строку. Это сэкономит вам время:

alert( "<input type='text' value=" + aVar + " id='laID' style='width: 100px; padding-right:20px; color:white;'/>");