Question

如何在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。我很抱歉这篇长篇文章。

Answer 1

使用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...

Answer 2

由于@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>

动态创建javascript中的元素

2 个答案: