Skip to content Skip to sidebar Skip to footer
Home / Dom / Html / Javascript

How To Insert Client-rendered Html Into Dom

Post a Comment
I've just rendered some HTML in the browser using a library like pug, mustache, handlebars, or dust. For example, '

I'm text!

'. If I was us

Solution 1:

...I have the string of several nested elements already, and want to add it to the DOM.

You can use .innerHTML property, but it has problems. A better alternative is a method that's like .innerHTML called .insertAdjacentHTML(). It doesn't have the problems that innerHTML has, it's faster, and you have options that allow you to place your string before/after/prepend/append on/in an element.

Signature

element.insertAdjacentHTML(position, text);

position determines where the text goes relative to the element. It must be one of the following values:

*beforebegin*// <== insert before the element<element>
      *afterbegin*// <== insert before the element's content (prepend)
      <child>Content</child><child>Content</child><child>Content</child><child>Content</child>
      Content
      *beforeend*// <== insert after the element's content (append)
  </element>
  *afterend* // <== insert after the element

Snippet

html,
body {
  height: 100%;
  width: 100%;
  background: black;
  font: 40012px/1.2 Consolas;
}

main {
  height: auto;
  width: 90vw;
  border: 3px dashed red;
  background: black;
  color: white;
}

section {
  height: auto;
  width: 100%;
  border: 2px dotted white;
  background: rgba(181, 111, 0, .6);
}

div {
  border: 1px solid white;
  background: rgba(255, 30, 30, .3);
}

fieldset {
  display: table-row;
  width: 90%;
}

.bb {
  height: 30px;
  color: gold;
  border-color: gold;
}

.ab {
  height: 30px;
  color: lightgreen;
  border-color: lightgreen;
}

.be {
  height: 30px;
  color: #0022ef;
  border-color: #0022ef;
}

.ae {
  height: 30px;
  color: violet;
  border-color: violet;
}
<!doctype html><html><head><linkhref='style.css'rel='stylesheet'></head><body><header><fieldset><buttononclick='bb()'>main beforebegin</button><buttononclick='ab()'>main afterbegin</button><buttononclick='be()'>main beforeend</button><buttononclick='ae()'>main afterend</button></fieldset></header><mainid='core'class='topic'><articleclass='category'><sectionid='I'><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p></section><sectionid='1I'><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p></section></article><articleclass='category'><sectionid='III'><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p></section></article></main><footerclass='footer'></footer><script>functionbb() {
      document.querySelector('main').insertAdjacentHTML('beforebegin', '<div class="bb">This div has been inserted at position beforebegin</div>');
    }

    functionab() {
      document.querySelector('.topic').insertAdjacentHTML('afterbegin', '<div class="ab">This div has been inserted at position afterbegin</div>');
    }

    functionbe() {
      document.querySelector('#core').insertAdjacentHTML('beforeend', '<div class="be">This div has been inserted at position beforeend</div>');
    }

    functionae() {
      document.querySelector('main#core.topic').insertAdjacentHTML('afterend', '<div class="ae">This div has been inserted at position afterend</div>');
    }
  </script></body></html>

Post a Comment for "How To Insert Client-rendered Html Into Dom"