CODEWITHSUNDEEP
javascriptjqueryhtmldom
Ryan McGarvey
Ryan McGarvey

Reputation: 313

appendChild is not a function - what am I doing wrong?

I know this is a very common error, but I just can't figure out why this isn't working.

I want to change the value of a span dynamically. Simple, right? I've tried $span.innerHTML = "text" and $span.innerText = "text", which do nothing, but don't throw any errors. My most recent attempt looks like this:

var $resourceSpan = $("#divname"+dynamic_variable);
var stringVar = functionThatReturnsString();
      while( $resourceSpan.firstChild ) {
        $resourceSpan.removeChild( $resourceSpan.firstChild );
      }
      var textNode = document.createTextNode(stringVar);
      $resourceSpan.appendChild( textNode );

Does anyone know why I'm throwing this error? Thanks

Upvotes: 0

Views: 145

Answers (2)

FlokiTheFisherman
FlokiTheFisherman

Reputation: 234

Did you wanna do somethin like this?

<html>
<head>
    <title>STACK OVERFLOW TESTS</title>
    <style>

    </style>
</head>
<body>

    <span>HI, IM SOME TEXT</span>

    <input type = 'button' value = 'Click me!' onClick = 'changeText()'></input> <!-- Change the text with a button for example... -->

    <script>
        var text = 'I AM THE NEW TEXT'; // The text to go in the span element

        function changeText(){
            var span = document.querySelector('span');
            span.innerHTML = text;
    }
    </script>
</body>
</html>

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

You are dealing with jQuery object, methods like removeChild() and appendChild() belongs to dom element not to the jQuery object.

To remove all contents of an element you can use .empty() and to set the text content of an element you can use .text(), but using .text() will replace existing content so in your case you can just use

var $resourceSpan = $("#divname" + dynamic_variable);
var stringVar = functionThatReturnsString();
$resourceSpan.text(stringVar);

Upvotes: 2

Related Questions