dynamic html content from javascript (using jquery methods)

Question

jquery is loaded in my html prior to my js code. Then in my puzzle.js I have :

class Puzzle {
  constructor(ID, Name, Status) {
    this.ID = "main" + ID;
    this.Name = Name;
    this.Status = Status;
    this.mainDiv = "";
  }

  generateDiv() {
    this.mainDiv = '<div id="' + this.ID + '"/>';
    $(this.mainDiv).addClass("puzzle");
  }
}

$(document).ready(function() {
  var puzzle = new Puzzle(1, "MyPuzzle", 1);
  puzzle.generateDiv();
  $("#Puzzles").append(puzzle.mainDiv);
})

.puzzle {
  width: 200px;
  height: 200px;
  background: black;
  border 1px solid white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Puzzles"></div>

And the div get's added with the nice ID field but the class does not. In fact anything I do to the div "jquery-style" does nothing (but also no console error)

I noticed that in the inspector (chrome) the div appears as

<div id="main1"></div> == $0

Not sure what it means or if relevant.

What am I doing wrong ???

I'm aware I could easily add the class in the html code, but I pretend to do other jquery actions on my html. Things way more complex. And I need a platform for doing so. — javirs
– javirs, Commented Sep 7, 2018 at 9:11
Read up on the preferred way to create html using jQuery here — Barthy
– Barthy, Commented Sep 7, 2018 at 9:20
I'm pretty sure this could never work: $(this.mainDiv).addClass("puzzle"); since you are in a class and jQuery doesn't runs in that context. — Andrés Marotta
– Andrés Marotta, Commented Sep 7, 2018 at 9:21
oh, you are totally wrong. $(".template").clone() works like a charm inside my class. I think the root error is that things must be in the DOM before you can find them via $( __ ) but im still investigating. — javirs
– javirs, Commented Sep 7, 2018 at 9:23

Barthy · Accepted Answer · 2018-09-07 09:40:08Z

2

You need to store the jQuery version of the div:

this.mainDiv = $(this.mainDiv).addClass("puzzle");

Otherwise you add the class to something that is discarded in the next line.

Taking into account what's discussed here:

var $div = $("<div>", {id: "foo", "class": "a"});

And Mark Baijens' comment:

It's common to prepend a dollar sign to variables that contain jQuery objects

You could do something like the following:

class Puzzle {
  constructor(ID, Name, Status) {
    this.ID = "main" + ID;
    this.Name = Name;
    this.Status = Status;
    this.$mainDiv = null;
  }

  generateDiv() {
    this.$mainDiv = $("<div>", {id: this.ID, "class": "puzzle"});
  }
}

$(document).ready(function() {
  var puzzle = new Puzzle(1, "MyPuzzle", 1);
  puzzle.generateDiv();
  $("#Puzzles").append(puzzle.$mainDiv);
})

.puzzle {
  width: 200px;
  height: 200px;
  background: black;
  border 1px solid white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Puzzles"></div>

edited Sep 7, 2018 at 9:40

answered Sep 7, 2018 at 9:24

Barthy

3,2511 gold badge27 silver badges43 bronze badges

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

6 Comments

javirs Over a year ago

simply instantiating the div as this.mainDiv = $('<div id="'+this.ID+'"/>'); instead of the original this.mainDiv = '<div id="' + this.ID + '"/>'; will also fix the thing

Mark Baijens Over a year ago

@javirs Best practice would be to change this.mainDiv to this.$mainDiv so you can easily see there is a jQuery object stored in that variable if you use that solution. It's common to prepend a dollar sign to variables that contain jQuery objects.

javirs Over a year ago

didnt event know $name was a valid variable name, Thank you SO much

Barthy Over a year ago

@MarkBaijens I added your hint to my answer. Thanks!

Barthy Over a year ago

@javirs I also updated my answer to show the use of best practices.

|

Collectives™ on Stack Overflow

dynamic html content from javascript (using jquery methods)

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related