Dynamically render object elements in HTML using JavaScript

Question

let abilities = data.player_info.abilities
    let summary = summarize_abiltiy(abilities)
    console.log(summary)
    document.getElementById("strength").append(
        "<span class=" + "label label-success>" + summary.strength[0][0] + ":" + summary.strength[0][1] + "</span>")

I am trying to dynamically render items in the summary object.

As you can see, the Weak items are hard-coded right now and the JavaScript render just got appended as a string.

<div id="player_name" class="price"></div>
            <div id="player_nation" class="lead"></div>
            <center id="strength"><span><strong>Strong: </strong></span>

            </center>
            <center><span><strong>Weak: </strong></span>
                <span class="label label-danger">HTML5/CSS</span>
                <span class="label label-danger">HTML5/CSS</span>
                <span class="label label-danger">HTML5/CSS</span>
                <span class="label label-danger">HTML5/CSS</span>
                <span class="label label-danger">HTML5/CSS</span>

            </center>

Any ideas to fix it?

do you want Strong: Agility :20 as your output?

Tushar Gupta
– Tushar Gupta

2019-07-02 05:05:22 +00:00
Commented Jul 2, 2019 at 5:05 — Tushar Gupta
– Tushar Gupta, Commented Jul 2, 2019 at 5:05

semuzaboi · Accepted Answer · 2019-07-02 05:23:36Z

Nice question, as others have suggested innerHTML should solve your problem

document.getElementById('strength').innerHTML =
  `<span class='label label-success'>${summary.strength1}:${summary.strength2}</span>`; //string literals

The new API append states that it is possible to use DOMString while appending

ParentNode.append() allows you to also append DOMString object, whereas Node.appendChild() only accepts Node objects.

So if you wish to remain with Node.append() i reckon the only way is to split it up further as below


var newSpan = document.createElement('span'); //create a node
newSpan.classList.add('label', 'label-success'); // manually add classes
newSpan.append(`${summary.strength1}:${summary.strength2}`);// here you can use append to append strings
document.getElementById('weak').append(newSpan); //can use append or appendChild here

ravi · Accepted Answer · 2019-07-02 05:06:01Z

0

@Tejasva's answer will remove <strong> tag... so better you use concate

document.getElementById("strength").innerHTML += 
    "<span class=" + "label label-success>" + summary.strength[0][0] + ":" + summary.strength[0][1] + "</span>";

answered Jul 2, 2019 at 5:06

ravi

1,22017 silver badges29 bronze badges

Comments

Shivani Sonagara · Accepted Answer · 2019-07-02 05:19:50Z

0

document.getElementById("strength").innerHTML += 
    "<span class=" + "label label-success> Agility : 20 </span>";

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center id="strength"><span><strong>Strong: </strong></span>
</center>

You may replace the static data with your dynamic data as per the requirement.

answered Jul 2, 2019 at 5:19

Shivani Sonagara

1,3079 silver badges21 bronze badges

Collectives™ on Stack Overflow

Dynamically render object elements in HTML using JavaScript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related