I can suggest you another direction : why bother generating a new Control in javascript when you can create controls A and B at the first page load and hide/show them dynamically using javascript ?
If I understand well, this was what you described in option 3.
Here is a sample code to get you started :
class MyCustom_Customize_Control extends WP_Customize_Control {
public function render_content() {
?>
<span><?php echo esc_html( $this->label ); ?></span>
<div>The Custom Control content</div>
<script>
jQuery(function($){
// hide control at first load
$('#customize-control-mycontrol').hide();
// bind to the event that will show the Control
$(document).on('customEvent', function(){
$('#customize-control-mycontrol').show();
});
});
</script>
<?php
}
}
// instantiate the Control
$wp_customize->add_control( new MyCustom_Customize_Control( $wp_customize, 'mycontrol', array(
'label' => 'Custom Control Label',
) ) );
Here is a small screen-cast that shows a possible result :