Adding HTML tag with javascript

Question

I have a problem while adding html tag dynamically. I am creating an input tag as

var valueString = $("#className").val();
var htmlString = "<input type='hidden' id='class' name='class' value='"+ valueString +"' />"

Now the problem is, when the "valueString" contains an apostrophe(') the value of the input created cuts off from the apostrophe. How can I append the variable as a single string?

And if I alter apostrophe(') with double quote(") then the problem occur when the variable contains double quote(").

• dom: in these kind of situation I always suggest that wrap your string with ' '

Answer 1

Don't build HTML by mashing strings together, it is the prime cause of that sort of problem. Use DOM (or jQuery wrappers around it) instead.

var valueString = $('#className').val();
var $input = $("<input />", {
 type: "hidden",
 name: "class",
 value: valueString,
 id: "class"
});

You can then append it to the document. If you really need a string of HTML then you can:

var htmlString = $("<div />").append($input).html();

---

var valueString = "Example\" input' with special < characters >";
var $input = $("<input />", {
 type: "hidden",
 name: "class",
 value: valueString,
 id: "class"
});
var htmlString = $("<div />").append($input).html();
alert(htmlString);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

• Quentin: @SanjayMaharjan — All the more reason to break it up into smaller blocks of code. It might be more verbose, but it makes maintenance and debugging much easier.
• squarelogic.hayden: +1 for using the attributes dict, I had up until now created the element and then used .attr, but this is much better. @SanjayMaharjan - String concatenation is never the answer, use this until your html gets complex enough to justify using a client-side templating engine, some of them are quite lightweight these days. (Mustache.js is just 9.5kb for instance)

Answer 2

Try to do concatenation properly with single quote,

valueString = valueString.replace('/"/',""")
var htmlString = '<input type="hidden" id="class" name="class" value="'+ valueString +'" />';

As a solution for the new problem, you have to replace the quote with relevant html number. For replacing it, the simple /"/ regex will help. If you want to replace all the instances, then just add g at the end of the regex.

• Quentin: And now it will break if the data includes " so it doesn't really help much.
• Sanjay Maharjan: ya Quentin. Its the problem as you stated
• Sanjay Maharjan: Have you got a solution for it?

Answer 3

use it in following format

var valueString = $("#className").val();
$('<input />').attr('type','hidden').attr('id','class').attr('value',valueString).addClass('class');

after do what ever you want to do like either add to dom or need html and any thing else