Declaring a variable with html in it, and inserting the variable by using .insertAfter

Question

I was wondering if I could declare html as a variable. In other words, something like this:

$(document).ready(function(){

  var Bold="Yes!  There is bold in the text above!!";
  var NoBold="No... There isn't any bolded text in the paragraph above..";
  var BoldButton="<input class="BoldButton" type="button" value="bold" id="WelcomeBoldButton">";

  $(BoldButton)
  .insertAfter('#intro');

});

And then, using the .insertAfter action, place it into my page at different intervals:

$(BoldButton).insertAfter(#'intro');

This doesn't appear to work, am I close to something though?

Answer 1

Your quotation mark is misplaced.

This:

$(BoldButton).insertAfter(#'intro');

should be:

$(BoldButton).insertAfter('#intro');

If you want only double quotes, you can escape them like this:

var BoldButton="<input class=\"BoldButton\" type=\"button\" value=\"bold\" id=\"WelcomeBoldButton\">";

Answer 2

Your quotes are broken. Use ' within ", " within ', or escape the quotes.

$(document).ready(function(){

  var bold="Yes!  There is bold in the text above!!";
  var noBold="No... There isn't any bolded text in the paragraph above..";
  var $button = $("<input class='BoldButton' type='button' value='bold' id='WelcomeBoldButton'>");
  $('#intro').after( $button );
});

$button.insertAfter( $('#intro') ) would also work.