clone-node-dynamic-style.html [plain text]

<html>
<head>
  <title>Test CloneNode</title>
  <script type="text/javascript">
  <!--
  function init() {
    var brNode = document.createElement("br");

    var myDiv = document.getElementById("myDiv");
    myDiv.style["fontSize"] = "30";
    myDiv.style["borderWidth"] = "2";
    myDiv.style["borderStyle"] = "ridge";
    myDiv.style["backgroundColor"] = "yellow";

    var myClonedDiv = myDiv.cloneNode(false);
    myClonedDiv.id = "myClonedDiv";
    myClonedDiv.appendChild(brNode);
    myDiv.parentNode.appendChild(document.createTextNode("Cloned Node with deep=false"));
    myDiv.parentNode.appendChild(myClonedDiv);

    var myDeepClonedDiv = myDiv.cloneNode(true);
    myDeepClonedDiv.id = "myDeepClonedDiv";
    myDiv.parentNode.appendChild(document.createTextNode("Cloned Node with deep=true"));
    myDiv.parentNode.appendChild(myDeepClonedDiv);
    
  }
  //-->
  </script>
</head>
  <body onload="init()">
    <h1>Cloning nodes</h1>
    <div id="myDiv">
    <span style="font-weight:bold">Bold<span style="text-decoration:underline">Bold+Underline<span style="font-style:italic">Bold+Underline+Italic</span>Bold+Uunderline</span>Bold</span>
    </div>
  </body>
</html>