Javascript 在JS中单击时将P元素更改为输入元素？

我的目标是更新一部电影。在这里，我根据从数据库中提取的数据创建了一个电影列表。现在，当我单击更新按钮时，我希望用输入元素替换P元素，这些元素保存当前的P元素值。我想在创建输入元素时删除P元素。然后，当用户按下save按钮时，输入元素被删除，来自输入元素的值存储在新的P元素中。然后我将把数据发送到数据库，保存在服务器端

这段代码是从数据库检索电影并生成HTML的代码

// retrieve
getMoviesBtn.addEventListener('click', async(e) => {
  e.preventDefault();

  await axios.get('http://localhost:5000/movies/retrieve-movies')
    .then( res => {
      const movieList = res.data;

      for (let i = 0; i<movieList.length; i++) {
        const sections = document.createElement('section');
        sections.innerHTML = `
          <p class='id'> ${movieList[i].id} </p>
          <p id='title'> Title: ${movieList[i].title} </p>
          <p> Runtime: ${movieList[i].runtime} </p>
          <p> Release date: ${movieList[i].releaseDate} </p>
          <button class="delete-btn">Delete</button>
          <button class="update-btn">Update</button>
        `
        divMovieList.appendChild(sections);
      }
    });
  });

现在可以删除第一个p元素并用输入元素替换它。但是我怎样才能找到同一部分中的其他P元素，做同样的事情呢

---

谢谢大家!

您可以尝试多种选择

您可以使用

queryselectoral（）

从

元素中选择所有

标记，循环浏览每个段落并为其创建输入。尽管您仍然需要一个

元素来包装输入，以捕获提交时的数据

请记住，输入需要

name

属性来知道每个值属于哪个字段。您可以使用

类

属性值作为循环的每个输入的

名称

属性值

else if(e.target && e.target.textContent === 'Update') {
  const section = e.target.parentNode;
  const paragraphs = section.querySelectorAll('p');
  for (const paragraph of paragraphs) {
    const name = paragraph.className;
    const input = document.createElement('input');
    input.name = name;
    input.type = 'text';
    input.value = paragraph.textContent;
    section.replaceChild(input, paragraph);
  }
}

或者，您可以为使用的每个模板创建多个函数。与显示模板和编辑模板类似，根据是否需要显示或编辑值，可以随时在两个模板之间切换

const createDisplayTemplate=movie=>`
${movie.id}
标题：${movie.title}
运行时：${movie.runtime}
发行日期：${movie.releaseDate}

删除
更新
`;
const createdittemplate=movie=>`
拯救
`;
const displayTemplate=createDisplayTemplate（电影）；
const editTemplate=createEditTemplate（电影）；

下一个可能是最简单的方法。您可以插入内容和输入，并在需要时通过添加或删除类在它们之间切换。就像下面的例子

const section=document.querySelector（'section'）；
const display=section.querySelector（'.js display'）；
const edit=section.querySelector（'.js edit'）；
section.addEventListener（'click'，event=>{
const{target}=事件；
if（target.classList.contains（'update-btn'））{
display.classList.add（'hide'）；
edit.classList.remove（'hide'）；
}else if（target.classList.contains（'save-btn'））{
display.classList.remove（'hide'）；
edit.classList.add（'hide'）；
}
});
edit.addEventListener（'submit'，事件=>{
event.preventDefault（）；
});
.hide{
显示：无；
}

1
标题：矩阵
运行时间：2h 16m

发布日期：1999年

删除
更新
拯救
通常在这些情况下，我会将所有控件放在我的原始HTML文档中，并使用CSS
display:none
隐藏最初不需要的控件，然后在单击按钮后使用JS更改CSS。也许我很奇怪。@mlibby，或者默认情况下有输入，这些输入是禁用的，当您想要编辑值时可以启用。这样你就不必切换元素了。哇，这是多么有用的信息啊！你太棒了！我想我会选择你的第一个或第二个解决方案。我喜欢这两个，它们更符合我当前的代码格式。非常感谢你，回来看看真是太棒了！
else if(e.target && e.target.textContent === 'Update') {
  const section = e.target.parentNode;
  const paragraphs = section.querySelectorAll('p');
  for (const paragraph of paragraphs) {
    const name = paragraph.className;
    const input = document.createElement('input');
    input.name = name;
    input.type = 'text';
    input.value = paragraph.textContent;
    section.replaceChild(input, paragraph);
  }
}