onlyforbopi
9/24/2018 - 8:33 AM

JS.DOM.MovingHtml.Useofappendtomovehtml.ex1

JS.DOM.MovingHtml.Useofappendtomovehtml.ex1

style.css
content_copyfile_download
    .box {
      border: silver solid;
      width: 256px;
      height: 128px;
      margin: 10px;
      padding: 5px;
      float: left;
    }
script.js
content_copyfile_download
function move(elem) {
  var targetList = document.querySelector('#coolBrowsers');
  targetList.append(elem);
  
  // trick to remove the click listener once
  // the image has been moved into the list
  elem.onclick = null;
}
js-dom-movinghtml-useofappendtomovehtml-ex1.markdown
content_copyfile_download
  • Rendered
  • Source

JS.DOM.MovingHtml.Useofappendtomovehtml.ex1

A Pen by Pan Doul on CodePen.

License.

index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Moving elements using appendChild()</title>
</head>
<body>
  <p>Click on a browser image to move it to the list of cool browsers:</p><br/>
  <img src="https://mainline.i3s.unice.fr/mooc//ABiBCwZ.png" id="cr" 
       onclick="move(this)" alt="Logo Chrome">
  <img src="https://mainline.i3s.unice.fr/mooc//n7xo93U.png" id="ff" 
       onclick="move(this)" alt="Logo Firefox">
  <img src="https://mainline.i3s.unice.fr/mooc//ugUmuGQ.png" id="ie" 
       onclick="move(this)" alt="Logo IE">
  <img src="https://mainline.i3s.unice.fr/mooc//jfrNErz.png" id="op" 
       onclick="move(this)" alt="Logo Opera">
  <img src="https://mainline.i3s.unice.fr/mooc//gDJCG0l.png" id="sf" 
       onclick="move(this)" alt="Logo Safari"><br/>
  <div class="box" id="coolBrowsers">
	  <p>Cool Web browsers</p>
  </div>
</body>
</html>