HTML Question

How to change a html element that is later added using jQuery?

I have the following problem:

<div class="container">
<button id="buttonOne">ButtonOne</button>
<button id="buttonTwo">ButtonTwo</button>
</div>
<p id="myParagraph">
<br>
</p>


And the following script :

<script>

var appendedInput = $('#buttonOne').one("click", function(event) {
var myInput ="<input name=inputOne id="inputOneId"></input>;
$('#myParagraph').append(myInput);
;})

</script>


edited

Ok. So I would like button two to perform just like button one, and either append a new element in the same paragraph, in the case scenario where button does not exist, or change #myInput with a button two generated input. I hope this is clearer now. Now I am even pondering why on earth would I want to do that ...
So my question is, how do I get my script to perform such a functionality?
If the yet unexisting element will exist, how do I change that element instead of adding a new element to the same paragraph. I am sorry it confuses people, I also find my issues very confusing, and this was a place to get answers.

Later Edited Code
With the help Of Jazz I am now trying you to mix .html with .append and get something seemingly going.

<script>
var inputOne ="<input name='inputOne' id='inputOneId'></input>";
var inputTwo ="<input name='inputTwo' id='inputTwoId'></input>";

var appendedInputOne = $('#buttonOne').one("click", function(event) {
$('#myParagraph').append(inputOne);
;})

var appendedInputTwo = $('#buttonTwo').one("click, function(event) {
$('#myParagraph').append(inputTwo);
</script>


Now here is the following case scenario again. If button one is clicked, and then! button two is clicked, We have 2 input fields, and we are looking for just 1 input field in total. Button two should only append if there is no input field. I am right about to switch to php and solve this issue from php. But it's still a great Javascript problem lol

Answer Source

Solved this using plain Javascript, not jQuery, and changing some of the html. Here is what I was looking for..

<html>
<head>
<script>
  function myFunction() {
    document.getElementById("demo").innerHTML = "edited";
  }
  function mySecondFunction() {
    document.getElementById("demo").innerHTML ="<input></input>";
  }
</script>
</head>

<body>

<h1>JavaScript in Head</h1>

<p id="demo">A Paragraph.</p>

 <button type="button" onclick="myFunction()">Try it</button>
 <button type="buttonOne" onclick="mySecondFunction()">Try Again</button>

</body>
</html> 
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download