Trying to insert a new html with input button

Question

My goal is to create a button that when pushed will execute javascript to insert html that creates a new div with content inside of it. I have been able to get the button to click and preform a .toggleclass and I have tried to use .html , .insertAfter(input.html()); but I have not had any luck.

My HTML for button

<input id="slideshow" name="viewing" value="View Slideshow" type="button"
   onClick="newOverlay();">

current javascript

function newOverlay(){
    var newItem = $("<p>Add this text instead</p>");
    $("input").insertAfter(this.html("<p> Is this going to work</p>"));
}

I know this is adding a < p > and not a div but I tried to make it similiar thinking if I could get it to insert this paragraph then I could work on inserting the div.

Thanks for looking at this.

Answer 1

If you want to insert a p tag after every input, then you should do

$("input").after("<p> Is this going to work</p>");

If you want to inser the p tag after the input that was clicked then you would do

$(this).after("<p> Is this going to work</p>");

Answer 2

Where do you want to append your new item? You should do something like this I guess.

function newOverlay(){
    var newItem = $("<p>").text("Add this text instead");
    $("YOUR_SELECTOR_HERE").append(newItem);
}

Give a sample with jsFiddle.