Issue with Concatenating Strings in JavaScript

Question

Hey I am trying to concatenate strings with javascript but I am having errors. Here is my code:

function popForm(){
   var v = document.getElementById('a1').innerHTML;

   document.getElementById("a1_i").innerHTML =
      "<input type='text' name='a1_i' value="+v+" />";
}

The element a1_i is a span that I am populating with the input tag shown above.

Further down I edit the element with ID a1:

document.getElementById("a1").innerHTML="blah bloop";

However when I try to view the result, all I can see is blah, not bloop.

Any suggestions?

You should be using DOM methods such as createElement and appendChild to build HTML, not string concatenation. — jbabey
– jbabey, Commented Mar 1, 2013 at 20:10
That's the general consensus I have gotten from looking up stuff online. This is just for a little project between me and my friends though so I didn't want to put time into it to learn something else. I figured out that I just missed some quotes though. Thanks! — beepboop
– beepboop, Commented Mar 1, 2013 at 20:28

Artem Sobolev · Accepted Answer · 2013-03-01 20:32:58Z

3

If you take a look at the generated HTML, you can notice following:

<input type='text' name='a1_i' value=blah bloop />

As syntax highlighter suggests, value of the value attribute is blah, while bloop is another attribute. You just need to add quotes:

function popForm(){
  var v = document.getElementById('a1').innerHTML; 
  document.getElementById("a1_i").innerHTML="<input type='text' name='a1_i' value='" + v   + "' />";
}

But if v contains symbol ', then you're in trouble again. So you either should replace them with HTML entities or follow jbabey's advice.

answered Mar 1, 2013 at 20:32

Artem Sobolev

6,1191 gold badge25 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Craig London · Accepted Answer · 2013-03-01 20:31:26Z

1

I concur with Jbabey, it will save you extra coding of text/html strings (error prone) in the future. JavaScript concatenation is pretty straight forward

*variable1 + "Text, note quotes around" + variablearray[1] + "etc...";*

Use the methods: document.createElement document.createTextNode appendChild

https://developer.mozilla.org/en-US/docs/DOM/document.createElement https://developer.mozilla.org/en-US/docs/DOM/Node.appendChild

answered Mar 1, 2013 at 20:31

Craig London

6741 gold badge9 silver badges14 bronze badges

Collectives™ on Stack Overflow

Issue with Concatenating Strings in JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related