Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="it">
    <div>3 (pre-existing)</div>
    <div id="doomed">4 (pre-existing)</div>
  </div>
  <br>
  <div id="fails">
    <div>Failures:</div>
  </div>
  <br>
</body>
</html>
 
#it {
  border: 1px solid blue;
}
 
function div(text) {
  var elem = document.createElement('div');
  elem.textContent = text;
  return elem;
}
function bad(text) {
  var elem = div(text);
  elem.style.backgroundColor = 'red';
  return elem;
}
function good(text) {
  var elem = div(text);
  elem.style.backgroundColor = 'lime';
  return elem;
}
window.onload = function () {
  var it = document.getElementById('it');
  var fails = document.getElementById('fails');
  try {
    it.before(good("1 - before"));
  } catch (a) {
    fails.appendChild(bad("before"));
  }
  try {
    it.prepend(good("2 - prepend"));
  } catch (b) {
    fails.appendChild(bad("prepend"));
  }
  try {
    it.append(good("5 - append"));
  } catch (c) {
    fails.appendChild(bad("append"));
  }
  try {
    it.after(good("6 - after"));
  } catch (d) {
    fails.appendChild(bad("after"));
  }
  var doomed = document.getElementById('doomed');
  try {
    doomed.replaceWith(good("4 - replaceWith"));
  } catch (e) {
    fails.appendChild(bad("replaceWith"));
  }
  document.body.appendChild(div("Done!"));
};
/*
Chrome Canary 53: No
Edge 13: No
Firefox Dev Ed 48.0a2: No
Firefox 49 (future): Yes
  https://bugzilla.mozilla.org/show_bug.cgi?id=911477#c37
Safari TP: Yes
*/
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
cvrebertpro
0viewers