不重复填充HTML表数据

Question

如何在不使用复制和粘贴代码的情况下填充多个表。 例如，循环遍历数组并分配

<p>AMD</p>

没有复制并粘贴下面的代码。也许循环和递增用javascript编写的id。我只是不知道如何去做。

        <div class="chat-history">

            <div class="chat-message clearfix">

                <img src="http://lorempixum.com/32/32/people" alt="" width="32" height="32">

                <div class="chat-message-content clearfix"  onclick=alert("test")>

                    <span class="chat-time"></span>

                    <h5></h5>

                    <p>AMD</p>

                </div> <!-- end chat-message-content -->

我试过这个我仍然没有完全理解它。

<div  class="chat">

        <div class="chat-history">

            <div class="chat-message clearfix">

                <img src="http://lorempixum.com/32/32/people" alt="" width="32" height="32">

                <div id="company" class="chat-message-content clearfix"  onclick=alert("hush")>

                    <span class="chat-time"></span>

                    <h5></h5>

                    <p >DCTH</p>

                </div> <!-- end chat-message-content -->

            </div> <!-- end chat-message -->

            <script>

                for (i = 0; i < 10; i++) {
                    document.getElementById("company").innerHTML+= "<p>TEST</p>"
                }



            </script>

Answer 1

您的商品可以放在div内，然后通过脚本，您应该将商品插入<p>标签。在下面添加了一个示例脚本：

        <div class="chat-history">

            <div class="chat-message clearfix">

                <img src="http://lorempixum.com/32/32/people" alt="" width="32" height="32">

                <div class="chat-message-content clearfix"  onclick=alert("hush")>

                    <span class="chat-time"></span>

                    <h5></h5>
                    <div id="company"></div>

                </div> <!-- end chat-message-content -->

            </div> <!-- end chat-message -->

            <script>
                var company = ["AMD", "APPLE"];
                company.forEach(function(i) {
                document.getElementById("company").innerHTML+= "<p>" + i + "</p>";
                });
            </script>