javascript insert adjacent html code example

Example 1: htmladjacent

// <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

// At this point, the new structure is:
// <div id="one">one</div><div id="two">two</div>

Example 2: javascript add adjacent html

ul = document.querySelector('ul');

ul.insertAdjacentHTML('afterbegin','<li>Hello</li>'); 

// 	 <ul>
//		<li>Hello</li>
//    </ul>

Example 3: javascript add adjacent html

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->