使用JavaScript动态呈现HTML中的对象元素

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>")

我正在尝试动态渲染summary对象中的项目。

如您所见，Weak项现在已进行硬编码，并且JavaScript渲染只是作为字符串附加了。

<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>

有什么想法要解决吗？

Answer 1

一个很好的问题，正如其他人所建议的innerHTML应该可以解决您的问题

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

新的API append指出在附加

时可以使用DOMString。

  

ParentNode.append（）允许您还添加DOMString对象，而Node.appendChild（）仅接受Node对象。

因此，如果您希望保留Node.append()，我认为唯一的方法是将其进一步拆分为以下内容

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

Answer 2

@Tejasva的答案将删除<strong>标签...因此最好使用串联

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

Answer 3

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>

您可以根据需要用动态数据替换静态数据。