javascript - 不重复地填充 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>