How to dynamically add a HTML input with JavaScript?

I’m trying to create a custom field type that can dynamically add controls.

I tried doing this:
$('#customFieldPanel')[0].append('<input type="text" value="ABC"/>');

But the HTML ended up on the page as text.

I tried modifying it via DOM and it works.
document.getElementById('customFieldPanel').innerHTML = '<input type="text" value="ABC"/>';

Why can’t I do the same with JQuery?

It’s my bad.

The element I was trying to append to was <p> instead of <div>. WIth <div> JQuery.append works as expected.