ネイティブJavascriptでwrap

In this example below you will see how to do a ネイティブJavascriptでwrap with some HTML / CSS and Javascript

jQueryのwrap的なことをネイティブjavascriptでやってみた 文字連結で囲むと対象要素にイベントが振られていた場合、別要素として扱われてしまう けどappendとかでNodeの値を保持したまま動かせばイベントは保持される

Thumbnail
This awesome code was written by 擬音の妖精さん of neko, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 擬音の妖精さん of neko ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>ネイティブJavascriptでwrap</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <iframe src="https://codepen.io/"></iframe>
<iframe src="https://codepen.io/"></iframe>
<iframe src="https://codepen.io/"></iframe>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/neko_sugar310gb/andx30cdandx30a4andx30c6andx30a3andx30d6javascriptandx3067wrap-gevWwd */
.douga{border:solid 1px #000;}
iframe{border:solid 15px #ccc;}

/*Downloaded from https://www.codeseek.co/neko_sugar310gb/andx30cdandx30a4andx30c6andx30a3andx30d6javascriptandx3067wrap-gevWwd */
/*====================
* native wrap
----------------------
+elm : object
+cre : rap tag object
======================*/
var wrap=function(elm,cre){
  var or=elm.nextElementSibling,
      pre=elm.parentNode;
  cre.appendChild(elm);
  pre.insertBefore(cre,or);
};

var douga = document.getElementsByTagName("iframe");
//超絶適当に書いたイベント設定
for(var i=0;i<douga.length;i++){
  douga[i].addEventListener("click",function(){
    console.log("ok");
  });
}
//要素を書き換えるやつ
document.addEventListener("DOMContentLoaded", function(){
  var creD=document.createElement("div");
  creD.className="douga";
  for(var i = 0; i < douga.length; ++i){
    wrap(douga[i],creD.cloneNode());
  }
});

Comments