I'm having an issue getting jquery objects to render as html.

In the code below, the tickBox gets rendered as [object Object] and not as html whereas all the rest is rendered correctly.

I know I could just add it as a string but that's not the goal here.

Why does the tickBox not render as html?

const legendData = ['hello world', 'wele back', 'hotel california', 'never leave'];

const tickBox = $('<div/>', {
  class: 'tickBox',
  html: $('<div/>', {
    class: 'ticked'
  })
});

const legendContent = legendData.map(item => {
  return $('<li/>', {
    dataId: `${item.split(' ')[0]}`,
    html: `${tickBox} ${item}`
    /* I know I could do this */
    //html: `<div class="tickBox"><div class="ticked"></div></div> ${item}`
  });
});

$('<div/>', {
  id: 'chartLegend',
  class: 'legend',
  title: 'Chart legend',
  html: '<p id="chartLegendHeader">Legend</p>'
}).appendTo(`#chartContainer`);

$('<ul/>', {
  class: 'legend',
  html: legendContent
}).appendTo('#chartLegend');

<script src=".1.1/jquery.min.js"></script>
<div id="chartContainer"></div>

I'm having an issue getting jquery objects to render as html.

In the code below, the tickBox gets rendered as [object Object] and not as html whereas all the rest is rendered correctly.

I know I could just add it as a string but that's not the goal here.

Why does the tickBox not render as html?

const legendData = ['hello world', 'wele back', 'hotel california', 'never leave'];

const tickBox = $('<div/>', {
  class: 'tickBox',
  html: $('<div/>', {
    class: 'ticked'
  })
});

const legendContent = legendData.map(item => {
  return $('<li/>', {
    dataId: `${item.split(' ')[0]}`,
    html: `${tickBox} ${item}`
    /* I know I could do this */
    //html: `<div class="tickBox"><div class="ticked"></div></div> ${item}`
  });
});

$('<div/>', {
  id: 'chartLegend',
  class: 'legend',
  title: 'Chart legend',
  html: '<p id="chartLegendHeader">Legend</p>'
}).appendTo(`#chartContainer`);

$('<ul/>', {
  class: 'legend',
  html: legendContent
}).appendTo('#chartLegend');

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

• javascript
• jquery

• 2 @RakeshSojitra Why should he? He's already added a snippet. – connexo Commented Jun 12, 2018 at 7:19
• I assume it's because you're trying to output a jQuery object not using jQuery for the task. – connexo Commented Jun 12, 2018 at 7:21

5 Answers 5

The problem is that you somehow need to serialize the HTML node to string, so that the interpolation works correctly.

One way is to use outerHTML of the corresponding native element:

const legendData = ['hello world', 'wele back', 'hotel california', 'never leave'];

const tickBox = $('<div/>', {
  class: 'tickBox',
  html: $('<div/>', {
    class: 'ticked'
  })
});

const legendContent = legendData.map(item => {
  return $('<li/>', {
    dataId: `${item.split(' ')[0]}`,
    html: `${tickBox[0].outerHTML} ${item}`
  });
});

$('<div/>', {
  id: 'chartLegend',
  class: 'legend',
  title: 'Chart legend',
  html: '<p id="chartLegendHeader">Legend</p>'
}).appendTo(`#chartContainer`);

$('<ul/>', {
  class: 'legend',
  html: legendContent
}).appendTo('#chartLegend');

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

https://api.jquery./jQuery/#jQuery-html-attributes

The documentation states that the jQuery() function takes an argument of PlainObject. PlainObject takes a html parameter that it expects to be a string already. It is presently stringifying a Javascript object into a string, hence [object Object].

You should render this into a HTML string.

use tickBox[0].innerHTML to render the html content inside tickBox

const legendData = ['hello world', 'wele back', 'hotel california', 'never leave'];

const tickBox = $('<div/>', {
  class: 'tickBox',
  html: $('<div/>', {
    class: 'ticked'
  })
});

const legendContent = legendData.map(item => {
  return $('<li/>', {
    dataId: `${item.split(' ')[0]}`,
    html: `${tickBox[0].innerHTML} ${item}`
    /* I know I could do this */
    //html: `<div class="tickBox"><div class="ticked"></div></div> ${item}`
  });
});
$('<div/>', {
  id: 'chartLegend',
  class: 'legend',
  title: 'Chart legend',
  html: '<p id="chartLegendHeader">Legend</p>'
}).appendTo(`#chartContainer`);

$('<ul/>', {
  class: 'legend',
  html: legendContent
}).appendTo('#chartLegend');

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

An alternative to concatenating the HTML of the tickBox element would be to clone() a new instance of it and append() that to each legendContent entity, like this:

const legendContent = legendData.map(item => {
  return $('<li/>', {
    dataId: `${item.split(' ')[0]}`,
  }).append(tickBox.clone()).append(item);
});

const legendData = ['hello world', 'wele back', 'hotel california', 'never leave'];

const tickBox = $('<div/>', {
  class: 'tickBox',
  html: $('<div/>', {
    class: 'ticked'
  })
});

const legendContent = legendData.map(item => {
  return $('<li/>', {
    dataId: `${item.split(' ')[0]}`,
  }).append(tickBox.clone()).append(item);
});

$('<div/>', {
  id: 'chartLegend',
  class: 'legend',
  title: 'Chart legend',
  html: '<p id="chartLegendHeader">Legend</p>'
}).appendTo(`#chartContainer`);

$('<ul/>', {
  class: 'legend',
  html: legendContent
}).appendTo('#chartLegend');

.tickBox {
  float: left;
  width: 15px;
  height: 15px;
  background-color: #CCC;
  margin: 0 5px 0 0;
}

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

you have to take HTML instead of an object like. you are using the whole object into HTML option. you just need to change a line

`${tickBox} ${item}`

to

`${tickBox.wrapAll('<div>').parent().html()} ${item}`

Or to

`${tickBox[0].outerHTML} ${item}`

For

const legendContent = legendData.map(item => {
  return $('<li/>', {
    dataId: `${item.split(' ')[0]}`,
    html: `${tickBox.wrapAll('<div>').parent().html()} ${item}`
  });
});

JSFiddle