[SOLVED] jQuery Image Object Behavior

Question

I have a project I'm working on, and I need to be able to create html using strings; it's how I'm creating a single page tab layout in this project: https://code.sololearn.com/Wh117ebi576o

What I noticed when trying to create a new image was that a new image object has a strange behavior. I can use jQuery to add the image to the DOM simply by selecting an element and passing the image object into the html() function. That works, but what doesn't work is if I try to add the image element object to a string:

html = "<div id='map'>" + image + "</div>";
element.html(html);

This doesn't work. Why doesn't this work? I have an example of it it the javascript of this code: https://code.sololearn.com/Wk9uVG9MmaD0

Answer 1

That's what I'm thinking too. I can only use the append methods for existing html in the DOM. Maybe I need to rethink the whole structure of my single-page tab system. I guess I could create the html I want to put the image into first, then append the image.

The overall goal was to preload the image so it wouldn't have to load every time a user tabbed to other content. Still thinking on it. Thanks for the answer Taste

Answer 2

It works :D using appendTo
https://code.sololearn.com/WH80E74Cvzmb/?ref=app

Answer 3

That's interesting. I had no idea you could do that. Thank you Taste

Answer 4

I think its because its an object appended to a string, the html() method surely know how to handle an object, but not a simple string concatenation.
Maybe use append() or appendTo()