簡體   English   中英

動態在javascript中創建元素

[英]Create elements in javascript dynamically

我如何在javascript中動態創建這樣的元素,因為我想在獲取數據庫中的內容時對其進行循環。

<div class="card">
<div class="card-image waves-effect waves-block waves-light">
  <img class="activator" src="images/office.jpg">
</div>
<div class="card-content">
  <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
  <p><a href="#">This is a link</a></p>
</div>
<div class="card-reveal">
  <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
  <p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>

外觀如下: http : //materializecss.com/cards.html#reveal

我嘗試在互聯網上搜索,但發現只動態地創建了一個帶有子元素的元素。 請幫我這是我的機器項目,我們的教授甚至都沒有考慮過javascript,我正在盲目地研究它。 我設法創建了一些JavaScript,例如函數。 抱歉,我的帖子很長。

使用jQuery:

為了簡單起見,僅將酥油:

 <div class="card">
   <div class="card-image waves-effect waves-block waves-light">
    <img class="activator" src="images/office.jpg">
   </div>
   <p>other</p>
 </div>

嘗試

 $('<div>').class('card').append(
   $('<div>').class('card-image waves-effect').append(
     $('<img>').class('activator').src('images/office.jpg'),
     $('<p>').text(other)
   )
 );

或使用純Javascript嘗試:

var div=document.createElement('div');
div.className='card';
var div2=document.createElement('div');
div.appendChild(div2);
etc...

由於@Emilio,我已成功將html元素轉換為jquery

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
 <script>
     $(document).ready(function () {

        var card = $('<div>', { class: 'row' }).append($('<div>', { class: 'col s4' }).append($('<div>', { class: 'card' }).append(
       $('<div>', { class: 'card-image waves-effect waves-block waves-light' }).append(
         $('<img>', { class: 'activator', src: 'img/products/Xiaomi-Mi-4.jpg'})
       ), $('<div>', { class: 'card-content' }).append(
             $('<span>', { class: 'card-title activator grey-text text-darken-4', text: 'Card Title' }).append($('<i>', { class: 'material-icons right' }).text('more_vert'))
             , $('<p>').append($('<a>', { href: '#' }).text('This is Link'))
       ), $('<div>', { class: 'card-reveal' }).append($('<span>', { class: 'card-title activator grey-text text-darken-4', text: 'Card Title' }).append($('<i>', { class: 'material-icons right' }).text('close')), $('<p>').text('Here is some more information about this product that is only revealed once clicked on.'))

     )))

        $(document.body).append(card);
     });
</script>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM