Simple plain JavaScript MVC

Question

I am building a simple script to understand how mvc works. I'm new to this and like to see if anyone out there can help me with this. I can't get my render function to display the content from the model. I get an error in my console:

"app.js:33 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'."

Any help with this would be appreciated.

var model = {
	farm: {
		cow: "Moo!", 
		pig: "Oink!", 
		duck: "Quack!"
	}
};

var controller = {
	init: function() {
		farmView.init();
	},
	getBarn: function() {
		return model.farm;
	}
};

	
var farmView = {
		
		init: function() {
			this.barn = document.getElementById('farm');
			this.render();
		},
		
		render: function() {
			var animals = controller.getBarn();
			var examplediv = document.getElementById('cow');
			this.barn.innerHTML = '';
			var htmlStr = '';
			htmlStr += '<span>' + model.farm.cow + '</span>' + '<span>' + model.farm.pig + '</span>';

			this.barn.appendChild(htmlStr);
			examplediv.appendChild(htmlStr);
			
		}
		
};
	
controller.init();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Farmcow</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
	<div id="farm">
		<div id="cow"></div>
	</div>
    <script src="app.js"></script>
</body>
</html>

The error message seems to say it clearly, what you pass as an argument to the appendChild is not of a Node type. You possibly meant to call createElement to have a new element, set its innerHtml and only then append it. If this is it, I'd post it as an answer. — Wiktor Zychla
– Wiktor Zychla, Commented Aug 1, 2017 at 18:53
The examplediv variable is of type object. I tried what you recommended before posting this and could not get the contents of the htmlStr variable to append as a child to the examplediv variable. Thanks for your feedback, though. — user3205055
– user3205055, Commented Aug 1, 2017 at 19:06
I am not sure you get my comment correctly. The examplediv has nothing to do, your argument to the appendChild is incorrect. You can't pass strings there and your htmlStr is a string. — Wiktor Zychla
– Wiktor Zychla, Commented Aug 1, 2017 at 19:09
I can see that by running typeof in the console. Thanks. I now have to figure out how to get the contents in htmlStr inside the example div then render. Thanks for your feedback. — user3205055
– user3205055, Commented Aug 1, 2017 at 19:12

Patrick Roberts · Accepted Answer · 2017-08-01 19:33:11Z

1

As the error points out, appendChild() expects a Node, not a string. Use insertAdjacentHTML() with the argument beforeend:

var model = {
  farm: {
    cow: "Moo!",
    pig: "Oink!",
    duck: "Quack!"
  }
};

var controller = {
  init: function() {
    farmView.init();
  },
  getBarn: function() {
    return model.farm;
  }
};


var farmView = {

  init: function() {
    this.barn = document.getElementById('farm');
    this.render();
  },

  render: function() {
    var animals = controller.getBarn();
    this.barn.innerHTML = '';
    var htmlStr = '';
    htmlStr += '<span>' + model.farm.cow + '</span> <span>' + model.farm.pig + '</span>';

    this.barn.insertAdjacentHTML('beforeend', htmlStr);
  }

};

controller.init();

<div id="farm"></div>

answered Aug 1, 2017 at 19:33

Patrick Roberts

52.4k10 gold badges120 silver badges166 bronze badges

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

Comments

Wiktor Zychla · Accepted Answer · 2017-08-01 19:25:23Z

0

The error message seems to say it clearly, what you pass as an argument to the appendChild is not of a Node type, it's a string.

You possibly meant to call document.createElement first to have a new element, then set its innerHTML and only then append it. This will work, as the newly created element will have a type accepted by the appendChild.

answered Aug 1, 2017 at 19:25

Wiktor Zychla

48.5k6 gold badges83 silver badges114 bronze badges

Collectives™ on Stack Overflow

Simple plain JavaScript MVC

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related