Javascript 如何移动html元素并更改其中的少量内容

我有一个关于电影的项目，要移动这个html元素，并更改其中的一些内容。我想更改的内容是图像、分级、名称和电影年份。这些是我想要改变的内容

7.7/10

准备好了吗
2018年

我的html内容如下所示

<figure class="figure figure--1">
      <img src="img/mov-1.jpg" alt="mov-1" class="figure__movie">
      <p>7.7/10</p>
      <svg class="figure__icon--1">
        <use xlink:href="img/sprite.svg#icon-heart"></use>
      </svg>
      <svg class="figure__icon--2">
        <use xlink:href="img/sprite.svg#icon-eye"></use>
      </svg>

      <div class="figure__star">
        <svg class="figure__star--1">
          <use xlink:href="img/sprite.svg#icon-star"></use>
        </svg>
        <svg class="figure__star--2">
          <use xlink:href="img/sprite.svg#icon-star"></use>
        </svg>
        <svg class="figure__star--3">
          <use xlink:href="img/sprite.svg#icon-star"></use>
        </svg>
        <svg class="figure__star--4">
          <use xlink:href="img/sprite.svg#icon-star"></use>
        </svg>
        <svg class="figure__star--5">
          <use xlink:href="img/sprite.svg#icon-star"></use>
        </svg>
      </div>

      <figcaption class="figure__caption">
            <h3>Ready Player one</h3>
            <p>2018</p>
      </figcaption>
</figure>

我想复制30次，只改变这四个元素。我怎样才能使用javascript复制这些内容而不重写30次呢？

方法：

• 将要更改的属性存储在数组中
• 使用

  cloneNode（true）

  克隆整个div结构
• 选择要更改的特定标记/元素并更新其值
• 使用

  appendChild

用你的例子解释：
由于要修改4个属性，因此可以将它们存储在如下数组中

let array = [
  {
    img: "img/mov-2.jpg",
    p1: "9.7/10",
    p2: "2017",
    h3: "Ready Player 1"
  },
  {
    img: "img/mov-5.jpg",
    p1: "8.7/10",
    p2: "2016",
    h3: "Ready Player 2"
  },
  {
    img: "img/mov-6.jpg",
    p1: "6.7/10",
    p2: "2016",
    h3: "Ready Player 3"
  }
]

//Now, get the node you want to clone:

let figure = document.getElementsByClassName("figure figure--1")[0];

//Using the HTML structure given by you:

<figure class="figure figure--1">
      <img src="img/mov-1.jpg" alt="mov-1" class="figure__movie">
      <p class="rate">7.7/10</p>
      <svg class="figure__icon--1">
        <use xlink:href="img/sprite.svg#icon-heart"></use>
      </svg>
      <svg class="figure__icon--2">
        <use xlink:href="img/sprite.svg#icon-eye"></use>
      </svg>

      <div class="figure__star">
        <svg class="figure__star--1">
          <use xlink:href="img/sprite.svg#icon-star"></use>
        </svg>
        <svg class="figure__star--2">
          <use xlink:href="img/sprite.svg#icon-star"></use>
        </svg>
        <svg class="figure__star--3">
          <use xlink:href="img/sprite.svg#icon-star"></use>
        </svg>
        <svg class="figure__star--4">
          <use xlink:href="img/sprite.svg#icon-star"></use>
        </svg>
        <svg class="figure__star--5">
          <use xlink:href="img/sprite.svg#icon-star"></use>
        </svg>
      </div>

      <figcaption class="figure__caption">
            <h3 class="h3">Ready Player one</h3>
            <p class="year">2018</p>
      </figcaption>
</figure>
<div id="parent"></div>

---

希望能有帮助。如有疑问，请回复。

使用

选择器

您可以在页面中找到HTML，然后使用

克隆节点（true）

，然后再次使用选择器更改嵌套节点的内容。你有没有试过或者做过一些研究？您可能会发现MDN是一个有用的资源，可以开始使用。使用循环并将元素附加到父div？我对javascript比较陌生，我需要一个指导原则和方法来实现它。感谢sunil，它可以工作，我遇到了另一个小问题：克隆的元素不适合样式化的css。我相信这是由于div元素。当我查看dev工具时，结构看起来像这样

，您能为您的css问题代码发布一个工作的JSFIDLE吗？
let array = [
  {
    img: "img/mov-2.jpg",
    p1: "9.7/10",
    p2: "2017",
    h3: "Ready Player 1"
  },
  {
    img: "img/mov-5.jpg",
    p1: "8.7/10",
    p2: "2016",
    h3: "Ready Player 2"
  },
  {
    img: "img/mov-6.jpg",
    p1: "6.7/10",
    p2: "2016",
    h3: "Ready Player 3"
  }
]

//Now, get the node you want to clone:

let figure = document.getElementsByClassName("figure figure--1")[0];

//Using the HTML structure given by you:

<figure class="figure figure--1">
      <img src="img/mov-1.jpg" alt="mov-1" class="figure__movie">
      <p class="rate">7.7/10</p>
      <svg class="figure__icon--1">
        <use xlink:href="img/sprite.svg#icon-heart"></use>
      </svg>
      <svg class="figure__icon--2">
        <use xlink:href="img/sprite.svg#icon-eye"></use>
      </svg>

      <div class="figure__star">
        <svg class="figure__star--1">
          <use xlink:href="img/sprite.svg#icon-star"></use>
        </svg>
        <svg class="figure__star--2">
          <use xlink:href="img/sprite.svg#icon-star"></use>
        </svg>
        <svg class="figure__star--3">
          <use xlink:href="img/sprite.svg#icon-star"></use>
        </svg>
        <svg class="figure__star--4">
          <use xlink:href="img/sprite.svg#icon-star"></use>
        </svg>
        <svg class="figure__star--5">
          <use xlink:href="img/sprite.svg#icon-star"></use>
        </svg>
      </div>

      <figcaption class="figure__caption">
            <h3 class="h3">Ready Player one</h3>
            <p class="year">2018</p>
      </figcaption>
</figure>
<div id="parent"></div>

let parent = document.getElementById("parent");
function appendToParent(data) {
  newDom = figure.cloneNode(true)
  newDom.getElementsByClassName("figure__movie")[0].src = data.img
  newDom.getElementsByClassName("rate")[0].innerHTML = data.p1
  newDom.getElementsByClassName("year")[0].innerHTML = data.p2
  newDom.getElementsByClassName("h3")[0].innerHTML = data.h3
  parent.appendChild(newDom)
}

array.forEach(function(data) {
  appendToParent(data)
})