異なるクラスのdivを作成し、jqueryを動的に追加します。

Question

JavaScriptとjQueryを初めて使用しています。私はjQueryでこのHTML構造を開発し、これらのdivとクラスを動的に作成したいと考えています。誰か助けてくれますか？

<div class="col-sm-4"> 
    <div class="product-image-wrapper"> 
    <div class="single-products"> 
     <div class="productinfo text-center"> 
     <img src="images/home/viralata2.jpg" alt="" /> 
     <h2>Brutos</h2> 
     <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Conheça esse cãozinho</a> 
     </div> 
     <div class="product-overlay"> 
      <div class="overlay-content"> 
      <h2>Brutos</h2> 
      <p>Vacinado</p> 
      <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Adotar</a> 
      </div> 
     </div> 
    </div> 
     <div class="choose"> 
      <ul class="nav nav-pills nav-justified"> 
      <li><a href="#"><i class="fa fa-plus-square"></i>Possível adoção</a></li> 

      </ul> 
     </div> 
    </div> 
</div> 

のjavascript：私は、コード内のコメントはしかし、理解している願っています：私はjQueryの.append()を使用して、目にそれを喜ばせるためにjQueryのオブジェクトを使用して欲しかったマークアップを作成し

var principal = document.createElement("div"); 
principal.setAttribute("class", "col-sm-4"); 

var elem1 = document.createElement("div"); 
elem1.setAttribute("class", "product-image-wrapper"); 
principal.appendChild(elem1); 

var elem2 = document.createElement("div"); 
elem1.setAttribute("class", "single-products"); 
elem1.appendChild(elem2); 

var elem3 = document.createElement("div"); 
elem1.setAttribute("class", "productinfo text-center"); 
elem2.appendChild(elem3); 

var elem4 = document.createElement("img"); 
elem1.setAttribute("img", "images/home/viralata2.jpg"); 
elem3.appendChild(elem4); 

var elem5 = document.createElement("H2"); 
var txt1 = document.createTextNode("Brutos") 
elem5.appendChild(txt1); 
elem4.appendChild(elem4); 


var elem6 = document.createElement("a"); 
elem6.setAttribute("class", "btn btn-default add-to-cart"); 
elem6.setAttribute("href", "#"); 
elem6.appendChild(elem5); 

var elem7 = document.createElement("i"); 
elem7.setAttribute("class", "fa fa-shopping-cart"); 
var txt2 = document.createTextNode("Conheça esse Cãozinho"); 
elem7.appendChild(txt2); 
elem6.appendChild(elem7); 

var elem8 = createElement("div"); 
elem8.setAttribute("class", "product-overlay"); 
elem7.appendChild(elem8); 

var elem9 = createElement("div"); 
elem9.setAttribute("class", "overlay-content"); 
elem8.appendChild(elem9); 

var elem10 = createElement("H2"); 
var txt3 = createTextNode("Brutos"); 
elem10.appendChild(txt3); 

var elem10 = createElement("H2"); 
var txt3 = createTextNode("Brutos"); 
elem10.appendChild(txt3); 
elem9.appendChild(elem10); 

var elem11 = createElement("P");  
var txt4 = createTextNode("Vacinado"); 
elem11.appendChild(txt4); 
elem10.appendChild(elem11); 

var elem12 = createElement("a"); 
elem12.setAttribute("href", "#"); 
elem12.setAttribute("class", "btn btn-default add-to-cart"); 
elem11.appendChild(elem12); 

var elem13 = createElement("i"); 
elem13.setAttribute("class", "fa fa-shopping-cart"); 
var txt5 = createTextNode("Adotar"); 
elem13.appendChild(txt5); 
elem12.appendChild(elem13); 


var elem14 = createElement("div"); 
elem14.setAttribute("class", "choose"); 
elem13.appendChild(elem14); 

var elem15 = createElement("ul"); 
elem15.setAttribute("class", "nav nav-pills nav-justified"); 
elem14.appendChild(elem15); 

var elem16 = createElement("li"); 
elem15.appendChild(elem16); 

var elem17 = createElement("a"); 
elem17.setAttribute("href", "#"); 
elem16.appendChild(elem17); 

var elem18 = createElement("i"); 
elem18.setAttribute("class", "fa fa-plus-square"); 
elem16.appendChild(elem18); 

var txt6 = createTextNode("Possível Adoção"); 

Answer 1

。あなたは私が要素を作成するこの方法を使用見ることができるように

$('button').on('click', function() { 
 
    /* 
 
    * create the parent container 
 
    */ 
 
    let $parent = $('<div/>', { 
 
     'class': 'col-sm-4' 
 
    }); 
 

 
    /* 
 
    * create the product image wrapper container 
 
    */ 
 
    let $productImgWrapper = $('<div/>', { 
 
     'class': 'product-image-wrapper' 
 
    }); 
 

 
    /* 
 
    * create the single products container 
 
    */ 
 
    let $singleProducts = $('<div/>', { 
 
     'class': 'single-products' 
 
    }); 
 

 
    /* 
 
    * create the product info container 
 
    * and append <img>, <h2>, and <a> with <i> elements 
 
    */ 
 
    let $prodInfo = $('<div/>', { 
 
     'class': 'productinfo text-center' 
 
    }).append(
 
     $('<img/>', { 
 
      src: 'images/home/viralata2.jpg', 
 
      alt: '' 
 
     }), 
 
     $('<h2/>', { 
 
      text: 'Brutos' 
 
     }), 
 
     $('<a/>', { 
 
      href: '#', 
 
      'class': 'btn btn-default add-to-cart', 
 
      text: 'Conheça esse cãozinho' 
 
     }).prepend(
 
      $('<i/>', { 
 
       'class': 'fa fa-shopping-cart' 
 
      }) 
 
     ) 
 
    ); 
 

 
    /* 
 
    * create the product overlay container 
 
    * and append the overlay-content container with children: 
 
    * <h2>, <p>, and <a> with <i> elements 
 
    */ 
 
    let $prodOverlay = $('<div/>', { 
 
     'class': 'product-overlay' 
 
    }).append(
 
     $('<div/>', { 
 
      'class': 'overlay-content' 
 
     }).append(
 
      $('<h2/>', { 
 
       text: 'Brutos' 
 
      }), 
 
      $('<p/>', { 
 
       text: 'Vacinado' 
 
      }), 
 
      $('<a/>', { 
 
       href: '#', 
 
       'class': 'btn btn-default add-to-cart', 
 
       text: 'Adotar' 
 
      }).prepend(
 
       $('<i/>', { 
 
        'class': 'fa fa-shopping-cart' 
 
       }) 
 
      ) 
 
     ) 
 
    ); 
 

 
    /* 
 
    * create the choose container 
 
    * and append <ul> element with child : 
 
    * <li> with child <a> with <i> elements 
 
    */ 
 
    let $choose = $('<div/>', { 
 
     'class': 'choose' 
 
    }).append(
 
     $('<ul/>', { 
 
      'class': 'nav nav-pills nav-justified' 
 
     }).append(
 
      $('<li/>').append($('<a/>', { 
 
       href: '#', 
 
       text: 'Possível adoção' 
 
      }).prepend($('<i/>', { 
 
       'class': 'fa fa-plus-square' 
 
      }))) 
 
     ) 
 
    ); 
 

 
    // append the product info and product overlay container to single products container 
 
    $singleProducts.append($prodInfo, $prodOverlay); 
 
    
 
    // append the single products and choose container to the product image wrapper container 
 
    $productImgWrapper.append($singleProducts, $choose); 
 
    
 
    // append the product image wrapper container to the parent container col-sm-4 then 
 
    // finally append the $parent container to the desired location in this case the body element 
 
    $parent.append($productImgWrapper).appendTo('body'); 
 
    
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>Initialize Data</button>

：ここ

はサンプルスニペットで、それが簡単に追加できるようにすること

$(element, attributes object)を/その要素の属性を変更します。必要なのは、作成したjqueryオブジェクトに追加する場所や追加する場所を知ることだけです。

シナリオ例：

var paragraph = $('<p>', { 
    "class" : 'red', // notice class is quoted '"' because class is a reserved word in javascript 
    id  : 'unique', 
    text : 'Hellow World' 
}; 
// append this to anywhere in the document to display it 

あなたはさらにDOM要素

を作成するためのjQueryのドキュメント HEREを読むことができます：ので、jQueryオブジェクトは、次のようになり、クラス .red、テキスト Hello WorldとID #uniqueで <p>要素を作成