CODEWITHSUNDEEP
javascriptjquerydynamicinnerhtmlcreateelement
Very Curious
Very Curious

Reputation: 891

JavaScript: Dynamically created html-like string won't tun into html

in DOM I already have a wrapper

<div id="wrapper"></div>

which I need to fill with bunch of divs, where each will represent new category. Each category will be then filled with various cards representing items of that category. Like this:

<div id="wrapper">
  <div data-category="puppy">
    Dynamically created category wrapper
    <div class="puppy1">...</div>
    <div class="puppy2">...</div>
  </div>
  <div data-category="cat">
    ...
  </div>
</div>

I use following code to create and fill category, but I always end up either having empty category or having a string inside reprenting the html.

var categoryWrapper = document.createElement("div");
categoryWrapper.setAttribute("data-category", key);
categoryWrapper.innerHtml = htmlString;

Here is a fiddle demo of my issue. https://jsfiddle.net/uuqj4ad5/

I'll be grateful for a help.

Upvotes: 2

Views: 94

Answers (3)

DHRUV GUPTA
DHRUV GUPTA

Reputation: 2091

Checkout my fiddle:- https://jsfiddle.net/dhruv1992/1xg18a3f/1/

your js code should look like this

// This is dynamically filled html template. The data comes from some JSON.
var htmlString = "<div class='card'><div class='cardImg'><img src='http://cdn.cutestpaw.com/wp-content/uploads/2012/07/l-Wittle-puppy-yawning.jpg' alt='Puppy'></div><div class='cardContent'><div class='cardInfo'><p>Puppy Yawning</p></div><div class='cardDesc'><p>Awww!</p></div></div></div>";

// This outer wrapper will in the end contain few categories
var outerWrapper = $("#wrapper");

outerWrapper.append('<div>'+htmlString+'</div>')

Upvotes: 1

Pranav C Balan
Pranav C Balan

Reputation: 115282

There is a typo, innerHml should be innerHTML(Javascript object properties are case sensitive) otherwise it simply add an additional property and nothing gets happened.

categoryWrapper.innerHTML = htmlString;


var htmlString = "<div class='card'><div class='cardImg'><img src='http://cdn.cutestpaw.com/wp-content/uploads/2012/07/l-Wittle-puppy-yawning.jpg' alt='Puppy'></div><div class='cardContent'><div class='cardInfo'><p>Puppy Yawning</p></div><div class='cardDesc'><p>Awww!</p></div></div></div>";

var outerWrapper = $("#wrapper");
var categoryWrapper = document.createElement("div");
categoryWrapper.innerHTML = htmlString;
outerWrapper.append(categoryWrapper);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h3>
    Under this title various categories should be dynamically created
  </h3>
  <div id="wrapper">outerWrapper waiting for dynamic data...</div>
</div>

FYI : If you want to remove the existing content then use html() method instead of append() method.

Upvotes: 1

Sushanth --
Sushanth --

Reputation: 55750

innerHtml

should be 

innerHTML

Javascript is case sensitive

If you are using jQuery why do you want to mix jQuery and Vanilla JS.

var outerWrapper = $("#wrapper");

// I created new categoryWrapper object
var categoryWrapper = $('<div/>', {
                          html: htmlString
                       });
debugger;
// WHen I have the category filled with inner data, I will append it into outerwrapper
outerWrapper.append(categoryWrapper);

jsFiddle

Upvotes: 1

Related Questions