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, Sep 07 '18 at 09:11
the `== $0` in chrome is [explained here](https://stackoverflow.com/questions/36999739/what-does-0-double-equals-dollar-zero-mean-in-chrome-developer-tools) — Barthy, Sep 07 '18 at 09:18
Read up on [the preferred way to create html using jQuery here](https://stackoverflow.com/questions/10619445/the-preferred-way-of-creating-a-new-element-with-jquery) — Barthy, Sep 07 '18 at 09: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, Sep 07 '18 at 09: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, Sep 07 '18 at 09:23

Barthy · Accepted Answer · 2018-09-07T09:40:08.640

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 07 '18 at 09:40

answered Sep 07 '18 at 09:24

Barthy

3,151
1
25
42

simply instantiating the div as `this.mainDiv = $('
');` instead of the original `this.mainDiv = '
';` will also fix the thing – javirs Sep 07 '18 at 09:27
1

@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. – Mark Baijens Sep 07 '18 at 09:29
didnt event know $name was a valid variable name, Thank you SO much – javirs Sep 07 '18 at 09:39
1

@MarkBaijens I added your hint to my answer. Thanks! – Barthy Sep 07 '18 at 09:40
1

@javirs I also updated my answer to show the use of best practices. – Barthy Sep 07 '18 at 09:41
this question / answer should be published in a book ;) – javirs Sep 07 '18 at 12:47

dynamic html content from javascript (using jquery methods)

1 Answers1