如何使多个innerHTML javascript 语句更加DRY

Question

我正在 Contact7 电子邮件表单中通过 javascript 覆盖一些 HTML 代码。

我有 3 个“p”标签，但我想不出一种方法可以使其更加干燥。

这是我的代码

  //remove default HTML//

  document.querySelector('.wpcf7-response-output').innerHTML = '';

  

  //Add first p tag and text//

  var p1 = document.createElement('p');

  p1.innterHTML ="Thank you for your order!";

  document.querySelector('.wpcf7-response-output').appendChild(p1);

  

  //Add second p tag and text//

  var p2 = document.createElement('p');

  p2.innerHTML = "A confirmation email has been sent to you from [e-mail].";

  document.querySelector('.wpcf7-response-output').appendChild(p2);

  

  //Add third p tag and text//

  var p3 = document.createElement('p');

  p3.innerHTML = "Please keep the confirmation email for your records."

  document.querySelector('.wpcf7-response-output').appendChild(p3);

结果 html 应该是

<div class=".wpcf7-response-output">

  <p>Thank you for your order!</p>

  <p>A confirmation email has been sent to you from [e-mail].</p>

  <p>Please keep the confirmation email for your records.</p>

</div>

我是一名初级开发人员，试图更好地编写 DRY 代码。任何建议，将不胜感激！

Answer 1

创建一个函数，您可以使用要附加的文本进行调用p：const container = document.querySelector('.wpcf7-response-output');container.innerHTML = '';const append = (text) => {&nbsp; container.appendChild(document.createElement('p')).textContent = text;};append('Thank you for your order!');append('A confirmation email has been sent to you from [e-mail].');append('Please keep the confirmation email for your records.');或者只是分配新的 HTML 字符串：document.querySelector('.wpcf7-response-output').innerHTML = `&nbsp; <p>Thank you for your order!</p>&nbsp; <p>A confirmation email has been sent to you from [e-mail].</p>&nbsp; <p>Please keep the confirmation email for your records.</p>`;

Answer 2

干得好。您可以通过这种方式消除重复，同时保持函数的通用性。泛化能力极大地有助于减少代码。下面的appendChild函数不仅可以用于此父子组合，还可以用于任何其他父子组合。'''function appendChild(parentSelector,childTagname,innerhtml)&nbsp; {&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; var childel = document.createElement(childTagname);&nbsp; &nbsp; &nbsp; childel.innterHTML =innerhtml;&nbsp; &nbsp; &nbsp; document.querySelector(parentSelector).appendChild(childel);&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp; appendChild('.wpcf7-response-output','p',"Thank you for your order!");&nbsp; appendChild('.wpcf7-response-output','p',"A confirmation email has been sent to you from [e-mail].");&nbsp; appendChild('.wpcf7-response-output','p',"Please keep the confirmation email for your records");'''