CODEWITHSUNDEEP
jquery
Hamza Darwesh
Hamza Darwesh

Reputation: 49

Uncaught TypeError: $(...).append is not a function error

now i have this code 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>append demo</title>
<style>
div {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div id="hhh">I would like to say: </div>

<script>
var x = document.getElementById("hhh");
$(x).prepend("Hello ");
</script>

</body>
</html>

but when i run it in google chrom browser didn't run and give me this error in console (Uncaught TypeError: $(...).append is not a function) i try it in jsfiddle and it work but i don't know why it don't work with me can any one help me

Upvotes: 0

Views: 10964

Answers (2)

Leo
Leo

Reputation: 675

Make sure you are calling jquery library before your code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Then try:

<script>
    $(document).ready(function(){       
       $('#hhh').prepend("Hello ");
    });
</script>

If you want to use only javascript try:

<script>
  document.getElementById("hhh").insertAdjacentHTML("beforeBegin", "<div>Hello </div>");
</script>

Or:

<script>
  var x = document.getElementById("hhh");
  var div = document.createElement("div");
  div.innerHTML = 'Hello';
  x.appendChild(div);
</script>

Upvotes: 1

Franklin Satler
Franklin Satler

Reputation: 320

You should get your x element as a jQuery element.

var x = $("#hhh");

Upvotes: 0

Related Questions