<div class="text-wrapper">

  <p class="my-para">Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss for HBO.</p>

  <p>It premiered on HBO in the United States on April 17, 2011, and concluded on May 19, 2019, with 73 episodes broadcast over eight seasons.</p>

</div>

​

<div>

  <input type="text" placeholder="Chaos Isn't A Pit. Chaos Is A Ladder."/>

  <button class="bb">Before Begin</button>

  <button class="ab">After Begin</button>

  <button class="be">Before End</button>

  <button class="ae">After End</button>

</div>

​

<p>Paragraph Count <span class="c-node"></span></p>

body {

  font-family: 'Hind';

  font-size: 1.75rem;

}

​

input {

  display: block;

  margin: 1rem 0;

  font-size: 1.75rem;

  width: 24ch;

  padding: .5rem;

  font-family: 'Hind';

}

​

button {

  font-size: 1.5rem;

  font-family: 'Hind';

  padding: 0.5rem;

  margin-right: 1rem;

  cursor: pointer;

}

​

p.my-para {

  color: orangered;

}

​

p {

  margin: 1rem 0;

}

​

span {

  padding: 0 0.25rem;

}

​

p.my-para + * {

  color: green;

}

​

let p_elem = document.querySelector("p.my-para");

let input_elem = document.querySelector("input");

let p_count = document.querySelector("div.text-wrapper").getElementsByTagName("p");

let c_node = document.querySelector("span.c-node");

​

c_node.textContent = p_count.length;

​

document.querySelector(".bb").addEventListener("click", () => {

  let temp_para = document.createElement("p");

  temp_para.textContent = input_elem.value;

  p_elem.insertAdjacentElement('beforebegin', temp_para);

  c_node.textContent = p_count.length;

});

​

document.querySelector(".ab").addEventListener("click", () => {

  let temp_span = document.createElement("span");

  temp_span.textContent = input_elem.value;

  p_elem.insertAdjacentElement('afterbegin', temp_span);

  c_node.textContent = p_count.length;

});

​

document.querySelector(".be").addEventListener("click", () => {

  let temp_span = document.createElement("span");

  temp_span.textContent = input_elem.value;

  p_elem.insertAdjacentElement('beforeend', temp_span);

  c_node.textContent = p_count.length;

});

​

document.querySelector(".ae").addEventListener("click", () => {

  let temp_para = document.createElement("p");

  temp_para.textContent = input_elem.value;

  p_elem.insertAdjacentElement('afterend', temp_para);

  c_node.textContent = p_count.length;

});

​

​