Question

我正在尝试在javascript中创建嵌套的div，但它不是在woking。下面是我试过的代码。我正在申请xternal css呢

<!DOCTYPE html>
 <html>
   <!--<meta charset="UTF-8">-->
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>first2</title>
  <head>
   <link rel="stylesheet" type="text/css" href="jsoncss.css">
 </head>
   <script type="text/javascript"             src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
   <script>

     /*html=$("<div class='wrapper'>").append(
         $("<div class='LeftSection'>").append(
              $("<div class='MyMainSavings'>")).append(
                               $("<div class='MyMainSavingsTop'>")));*/


      /*$("<div>", {class: "wrapper"}).append(
    $("<div>", {class: "LeftSection"}).append(
        $("<div>", {class: "MyMainSavings"}).append(
            ("<div>", {class: "MyMainSavingsTop"}),
            ("<div>", {class: "MyMainSavingsBottom"})
        ),
        $("<div>", {class: "MyMainSavings"}).append(
            ("<div>", {class: "MyMainSavingsTop"}),
            ("<div>", {class: "MyMainSavingsBottom"})
        ),
        $("<div>", {class: "MyMainSavings"}).append(
            ("<div>", {class: "MyMainSavingsTop"}),
            ("<div>", {class: "MyMainSavingsBottom"})
        ),
        $("<div>", {class: "MyMainSavings"}).append(
            ("<div>", {class: "MyMainSavingsTop"}),
            ("<div>", {class: "MyMainSavingsBottom"})
        )
    ), 
    $("<div>", {class: "RighSection"}).append(
        $("<span>").text(
            "Some text"
        )
    )
     ).appendTo("body")*/

  var iDiv = document.createElement('div');

    //iDiv.id = 'wrapper';
    iDiv.className = 'wrapper';
     //document.getElementsByTagName('body')[0].appendChild(iDiv);

      var div2 = document.createElement('div');
          div2.className = 'LeftSection';
     iDiv.appendChild(div2);    

     /*$(document).ready(function () {
         $(".wrapper").addClass("wrapper");
         });*/
      </script>
     <body> 
     </body>
      </html>

如何将外部css链接到在javascript中创建的div？我尝试了addClass但是dosnt工作。请考虑注释掉的代码，这些是我尝试的不同想法。

Answer 1

将元素附加到主标记后，您可以应用其他事件，

var p = document.getElementById('ptag');

var div = document.createElement('div');
div.className = 'wrapper';

var div1 = document.createElement('div');
div1.id = 'wraper';

div.appendChild(div1);
p.appendChild(div); //<--attac div to main tag

alert($('#ptag')[0].innerHTML)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="ptag">

</p>

Answer 2

我在脚本中看到的唯一问题是你没有将创建的IDiv附加到DOM中的任何其他元素。

所以最后你需要像下面那样追加它

var iDiv = document.createElement('div');

    //iDiv.id = 'wrapper';
    iDiv.className = 'wrapper';
     //document.getElementsByTagName('body')[0].appendChild(iDiv);

      var div2 = document.createElement('div');
          div2.className = 'LeftSection';
     iDiv.appendChild(div2);    
    document.getElementById('any-parent-element-id').appendChild(iDiv)

Answer 3

这可能是一种方式

html='<div class="element"><p class="children"></p></div>'; 

$('#wrapper').html(html);

使用jquery / javascript设计嵌套的div

3 个答案: