<html>

<body>
  <section class="wrapper">
    <span>Wrapper</span>
  </section>
</body>

</html>
.wrapper {
  padding: 20px;
  background-color: rgb(229, 200, 255);
}

div {
  padding: 10px;
  background-color: rgb(200, 230, 255);
  margin: 10px;
}

p {
  padding: 5px;
  background-color: rgb(255, 211, 200);
}

span {
  opacity: 0.5;
}
//main function
function appendChildMultiple(parent) {
  //check function argument is an element
  if (parent.nodeType !== undefined) {
    const pTag = document.createElement("p");
    pTag.innerText = "This is the appended element";
    //finally append child to parent
    parent.appendChild(pTag);
  }
}

// target the wrapper and create test elements
const wrapper = document.querySelector(".wrapper");
const d1 = document.createElement("div");
const d2 = document.createElement("div");
//append test elements to wrapper
wrapper.appendChild(d1);
wrapper.appendChild(d2);

//use appendChildMultiple function
appendChildMultiple(d1);
appendChildMultiple(d2);
//we appended "pTag" multiple times

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.