jquery accessing element via .html() returns undefined

Question

I am new to jquery, I tried to access the input element via id , I see it returns "undefined" I wrapped it inside document.ready; result is the same, here is the code snippet

let input;

function maintest() {
   input = $("<input>").attr({"id":"test"});
   input.append("#mainDiv");
   $(document).ready( function(){
     alert($("#test").html());
   });

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body onload="maintest()">
  <div id="mainDiv"></div>
</body>

I am surprised it shows "undefined" instead of showing the whole input element when I alert

What is the value of input when you use $(input).attr({"id":"test"})? — Daemon Beast
– Daemon Beast, Commented Feb 12, 2020 at 18:59

Barmar · Accepted Answer · 2020-02-12 19:10:27Z

3

You have several problems:

You never assigned anything to input before calling $(input). If you're trying to create an input element, you need to put a literal string <input> in the arguments.
You should use appendTo(), not append().
input elements aren't containers, they don't have any HTML in them, so .html() won't return anything (it's equivalent to .innerHTML, not .outerHTML). I changed the script to use $("#mainDiv").html(), then it show the <input> contained within it.

function maintest() {
  let input = $("<input>").attr({
    "id": "test"
  });
  input.appendTo("#mainDiv");
  $(document).ready(function() {
    alert($("#mainDiv").html());
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<body onload="maintest()">
  <div id="mainDiv"></div>
</body>

edited Feb 12, 2020 at 19:10

answered Feb 12, 2020 at 19:01

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

karansys Over a year ago

Thanks Barmar but why wouldn't alert($("#test").html()); output anything?

Barmar Over a year ago

What do you expect it to output?

Barmar Over a year ago

.html() is equivalent to .innerHTML, it returns the contents of the element, not the element itself.

Collectives™ on Stack Overflow

jquery accessing element via .html() returns undefined

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related