<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="Write Anything" />

  <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>Node 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;

}

​

​

p.my-para + * {

  color: green;

}

​

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

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

let text_wrapper = document.querySelector("div.text-wrapper");

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

​

c_node.textContent = text_wrapper.childNodes.length;

​

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

  p_elem.insertAdjacentHTML('beforebegin', input_elem.value);

  c_node.textContent = text_wrapper.childNodes.length;

});

​

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

  p_elem.insertAdjacentText('afterbegin', input_elem.value);

  c_node.textContent = text_wrapper.childNodes.length;

});

​

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

  p_elem.insertAdjacentText('beforeend', input_elem.value);

  c_node.textContent = text_wrapper.childNodes.length;

});

​

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

  p_elem.insertAdjacentText('afterend', input_elem.value);

  c_node.textContent = text_wrapper.childNodes.length;

});

​

​