2016-01-12 3 views
0

Я пытаюсь создать вложенные divs в javascript, но это не woking. Ниже приведен код, который я tried.I подает xternal CSS ихСтилированные вложенные divs с использованием jquery/javascript

<!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? Я пробовал addClass но dosnt работы. Пожалуйста, рассмотрите также прокомментированный код, это разные идеи, которые я пробовал.

+0

Более половины коды вы публикуемой закомментирован. Если это не имеет значения, зачем это делать? Это только добавляет к беспорядку и отвлекает внимание от проблемы. Не ленитесь, просто сбрасывайте свой код на лицо людей. Будьте ответственны и пост аккуратный и чистый код при вводе вопроса. Прочитайте это - http://stackoverflow.com/help/mcve – Abhitalks

+0

При всем моем уважении я разместил этот код, чтобы показать, какие все идеи я попробовал. – Jaideep

+0

Это нормально. Но вам нужно четко объяснить свой вопрос и очистить код. Некоторые попытки используют jQuery, а некоторые попытки - простой Javascript. Пожалуйста, очистите свой код, большая часть прокомментированного кода не применяется. Четко укажите, что вы хотите сделать, и ваш код должен отражать это. Вы получите лучшие ответы, когда отправляете лучший вопрос. – Abhitalks

ответ

0

После добавления элемента к основному тегу вы можете применить другое событие,

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>

0

Единственная проблема, которую я мог бы видеть в вашем скрипте ваш не прилагая 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) 
+0

Я проверил этот код, и он работает нормально. –

0

Это может быть путем

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

$('#wrapper').html(html); 
Смежные вопросы