How to insert a text-like element into document using javascript and CSS?

span#yourSpan {
  /* defaults */
  position: static;
  display: inline;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;

  /* inherit from parent node */
  font: inherit;
  color: inherit;
  text-decoration: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  white-space: inherit;
  word-spacing: inherit;
}

<span class="hello-node">hello</span>

span.hello-node {
  /* defaults */
  position: static !important;
  display: inline !important;
  ...
}

<p style="display: inline">Hello <p id="myIdValue" style="display: inline">new</p> World</p>

span {
  display: block;
  margin: 10px;
  padding: 10px;
}

<span style="display: inline; margin: 0; padding: 0;">New Span</span>