javascript - Why jQuery append() removes words after first blank space in string - Stack Overflow

admin管理员组

文章数量:1415460

I'm trying to dynamically generate a form after an ajax request. Below is the relevant code sample :

for (var i in response.responseJSON[0].fields) {
  var field = response.responseJSON[0].fields[i];
  $('#properties_form').append('<label for=' + i + '>' + i + '</label>' +
                    '<input id=' + i + ' value=' + field + '>');
}

My problem is that, when var i and var field are strings with blank spaces like "Hello world", my label and inputs will be like <label id="Hello" world=""> and <input value="Hello" world="">. However, the label text will be displayed correctly i.e. <label>Hello world</label>.

I've no idea what kind of sorcery that is, but I'll be very grateful for any help. Thanks in advance.

I'm trying to dynamically generate a form after an ajax request. Below is the relevant code sample :

for (var i in response.responseJSON[0].fields) {
  var field = response.responseJSON[0].fields[i];
  $('#properties_form').append('<label for=' + i + '>' + i + '</label>' +
                    '<input id=' + i + ' value=' + field + '>');
}

My problem is that, when var i and var field are strings with blank spaces like "Hello world", my label and inputs will be like <label id="Hello" world=""> and <input value="Hello" world="">. However, the label text will be displayed correctly i.e. <label>Hello world</label>.

I've no idea what kind of sorcery that is, but I'll be very grateful for any help. Thanks in advance.

• javascript
• jquery

Share Improve this question Follow edited Aug 11, 2017 at 13:25 Hassan Imam 22.6k66 gold badges4545 silver badges5353 bronze badges asked Aug 11, 2017 at 13:21 May.DMay.D 1,91011 gold badge2020 silver badges3535 bronze badges 2

• 2 you should consider using attr and text instead of string concat. – Daniel A. White Commented Aug 11, 2017 at 13:22
• Because without quotes an HTML attribute can't have spaces. Your code is working fine, you just didn't write the code you wanted :) – Nathan K Commented Aug 11, 2017 at 13:26

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

There's a much more robust way of doing this.

for (var i in response.responseJSON[0].fields) {
  var field = response.responseJSON[0].fields[i];
  $('#properties_form')
     .append($('<label>').attr('for', i).text(i))
     .append($('<input>').attr('id', i).val(field));
}

You won't have to worry about the content of the strings as jQuery and the DOM will handle it for you. Not to mention this is much easier to read.

Use " to enclose the attributes.

$('#properties_form')
      .append('<label for="' + i + '">' + i + '</label>' +
                '<input id="' + i + '" value="' + field + '">');

EDIT

This will break for the cases where the value for i is something like This "works". Best solution is to append as jQuery or JS objects rather than using HTML string just like Daniel's answer.

Following snippet contains the correct fix for this. Updated based on the answer from Daniel.

i = 'Hello "World"';
field = 'Hello "World"s';
$('#properties_form')
      .append($('<label>').attr('for', i).text(i))
      .append($('<input>').attr('id', i).val(field));

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="properties_form"></div>

本文标签： javascriptWhy jQuery append() removes words after first blank space in stringStack Overflow