循环通过 div id 显示在其他地方

Question

我有一个使用 Location id 的 div，如下所示：

<div id="Weymouth">
    <ul style="padding: 4px 6px;">
        <li>
            <div style="float:left;padding: 0 0 0 0; text-align: left; font-size: 14px; font-weight: bold;">May 21st</div>
            <div style="float:right;padding: 0 0 0 0; text-align: right;">5PM - 7:30PM</div>
            <div style="clear: both"></div>
            <div style="float:left;padding: 0 0 0 0; text-align: left;">Weymouth Liquor Store</div>
            <div style="float:right;padding: 0 0 0 0; text-align: right;"><a href="https://www.google.com/maps/dir/Andover,+MA//@42.6495835,-71.166032,12z/data=!4m8!4m7!1m5!1m1!1s0x89e308597f9a4cf5:0x28f59c5c00d57256!2m2!1d-71.1367953!2d42.6583356!1m0" class="amstel" target="_blank">Directions</a></div>
            <div style="clear: both"></div>
        </li>
    </ul>
</div>
<div id="Marshfield">
    <ul style="padding: 4px 6px;">
        <li>
            <div style="float:left;padding: 0 0 0 0; text-align: left; font-size: 14px; font-weight: bold;">May 10th</div>
            <div style="float:right;padding: 0 0 0 0; text-align: right;">6PM - 8PM</div>
            <div style="clear: both"></div>
            <div style="float:left;padding: 0 0 0 0; text-align: left;">Marshfield Liquor Store</div>
            <div style="float:right;padding: 0 0 0 0; text-align: right;"><a href="" class="amstel">Directions</a></div>
            <div style="clear: both"></div>
        </li>
    </ul>
</div>

我将拥有 20 个这样的位置。我想在网页的另一部分显示它们：我通过调用 20 个位置中的每一个来使其工作，如下所示：

var weymouth = document.getElementById('Weymouth').innerHTML;
var marshfield = document.getElementById('Marshfield').innerHTML;  (do this for all 20 locations)

然后在 ul li 中调用它以稍微不同地显示它：

<ul>
    <li class="alt">
        <div style="padding: 0 0 0 0; text-align: left;">
            <script language="javascript" type="text/javascript">document.write(marshfield);</script>
        </div>
        <div style="clear: both"></div>
    </li>
    <li class="alt">
        <div style="padding: 0 0 0 0; text-align: left;">
            <script language="javascript" type="text/javascript">document.write(weymouth);</script>
        </div>
        <div style="clear: both"></div>
    </li>
</ul>

使用相同的 id（我想重命名为 Location）并将 _1 到 _20 附加到每个位置...如何将其放入循环并显示而无需显示 20 个变量和 20 li？

---

使用更新的代码附加到这篇文章，但仍然无法正常工作。任何帮助将不胜感激： 这是我的javascript：

   <script type="text/javascript">
        var target = document.querySelector('#target'), // get a reference to empty UL, target
        divs = ['Andover', 'Westford', 'Burlington', 'Boston', 'Weymouth', 'Marshfield'];
        //add ids of the divs that you want to copy to this array

        divs.forEach(function (v) { //iterate over ids array, and repeat below process for each id
            var el = document.querySelector('#' + v).cloneNode(true); //copy the div with "v" id
            var li = document.createElement('li') //create a new list item in memory
            li.className = 'alt'; //set css class name of new list item
            li.appendChild(el); // add the copied div to list item
            target.appendChild(li); //finally add the new list item to your target.
        });
    </script>

And here is my HTML:

        <div class="locations">
        <div class="headline">Burger Truck Locations</div>
             <ul id="target"></ul>
        </div>

 It is not displaying anything.  Need help.

Answer 1

如果你只是想复制一些<div>到<ul>，你可以做以下

<!-- create an empty <ul> in HTML to copy your div's into -->
<ul id="target"></ul>

在你的<ul> 和<div> 之后，运行这个脚本

var target = document.querySelector('#target'), // get a reference to empty UL, target
divs = ['Weymouth', 'Marshfield'];
//add ids of the divs that you want to copy to this array

divs.forEach(function (v) { //iterate over ids array, and repeat below process for each id
   var el = document.querySelector('#' + v).cloneNode(true); //copy the div with "v" id
   var li = document.createElement('li') //create a new list item in memory
   li.className = 'alt'; //set css class name of new list item
   li.appendChild(el); // add the copied div to list item
   target.appendChild(li); //finally add the new list item to your target.
});

附带说明，您应该使用 CSS 类而不是内联样式，并避免使用 document.write