-1
var anotherListItem = '<div class= "form-list"> 
                         <button class= "done"></button> 
                         <input type= "text"> 
                       </div>'

This is not working. I've also tried to include a backslash at every ' like so: '/<div… </div>/' but it doesn't help. How can I fix this?

Anthon
  • 69,918
  • 32
  • 186
  • 246
violetto
  • 65
  • 1
  • 7
  • well you need to remove the space between the class= <-- get rid of the space (close the gap) and at the very end of the statement you need a ; var anotherListItem = '
    ';     – floor Mar 15 '15 at 06:11
  • This `\` is a backslash and `/` is a slash or forward slash. Put ibackquotes around inline code, and especially around HTML as the [so] system otherwise thinks its markup. – Anthon Mar 15 '15 at 07:16
  • I appreciate your help too! – violetto Mar 15 '15 at 07:21
  • possible duplicate of [Creating multiline strings in JavaScript](http://stackoverflow.com/questions/805107/creating-multiline-strings-in-javascript) – Artjom B. Mar 15 '15 at 20:42

2 Answers2

0

Put the whole thing on one line like this:

var anotherListItem = '<div class="form-list"><button class="done"></button><input type="text"></div>';

For multiple lines, you'd have to use string concatenation:

var anotherListItem2 = '<div class="form-list">'+ 
                         '<button class="done"></button>'+  
                         '<input type="text">'+  
                       '</div>'

Remember, if you want to bind a click handler or similar to a dynamically added element, you have to use Event Delegation

Below is a contrived example:

$('#container').on('click','.done', function(){
  alert('this works');
  
  });
var anotherListItem = '<div class="form-list"><button class="done">press me</button><input type="text"></div>';
$('#container').append( anotherListItem );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="container"></div>
Wesley Smith
  • 19,401
  • 22
  • 85
  • 133
  • I actually started off with a one-liner. It worked at first, but no longer now. :T – violetto Mar 15 '15 at 06:18
  • @munmay what do you mean by "it doesnt work" ? the above does work, what are you trying to do with it after you create the variable? – Wesley Smith Mar 15 '15 at 06:21
  • @munmay are you by chance trying to bind a click handler to the "done" button? – Wesley Smith Mar 15 '15 at 06:23
  • I was trying to add the elements in the variable after "enter" is pushed. This solution worked and it turns out I was having issues elsewhere. Thank you! – violetto Mar 15 '15 at 07:20
-1
var anotherListItem = "<div class= 'form-list'>"+ 
                     "<button class= 'done'></button>"+ 
                     "<input type= 'text'>"+ 
                  "</div>"

This is the fiddle , if you want line break put a "\n"

http://jsfiddle.net/dea5h3eh/

Abdul Muheet
  • 315
  • 3
  • 25
  • You should wrap your string in single quotes and use the normal double quotes to wrap the properties. Additionally, using `\n` for a line break would only work if being displayed in an alert or similar, as this is an `html` string and likely to be inserted in the `dom` you should use `
    ` for a a line break. See http://jsfiddle.net/DelightedDoD/dea5h3eh/1/     – Wesley Smith Mar 15 '15 at 06:39