使用jquery或javascript将元素添加到div

时间:2015-11-07 15:31:25

标签: javascript jquery

问题是:我需要在div中添加文字,但我不能。 我们有两种观点, id =“列表视图 id =“网格视图” 我正在尝试使用此js代码添加通知栏,我可以将我想要的内容添加到列表视图但不能添加到网格视图中。

这是“LİST”HTML代码,

<div id="list-view" style="">
     <div class="package-details-list">
           <div class="package-details-p1">
           <div class="package-details-p2">
           <div class="package-details-p3">
     <div class="package-details-list">
     <div class="package-details-list">
     <div class="package-details-list">
     <div class="package-details-list">
     <div class="package-details-list">
     <div class="package-details-list">
<div class="package-details-list">

这是“GRİD”html代码

<div id="list-view" style ="" >
<div id="grid-view" style="none">
    <div class="package-grid-row clearfix">
           <div class="package-details-grid">
                  <a class="package-picture" href="http.abc.com">
                  <h2>
                  <p>
           <div class="package-details-grid">
           <div class="package-details-grid">
           <div class="package-details-grid">
           </div>
    <div class="package-grid-row clearfix">
    <div class="package-grid-row clearfix">
    <div class="package-grid-row clearfix">
</div>

我正在尝试将文本添加到“#package-details-grid”中,但我需要随机执行此操作。

这是我的js代码,

 (function($){    
      var gridp = $("<div></div>");    
      gridp.css({height:'17px',    
      paddingRight: '5px',    
      paddingLeft: '5px',     
      textAlign: 'center',    
      // letterspacing: '2px',   
      lineHeight: '14px',     
      //overflow: 'hidden',    
      fontSize: '12px',     
      fontWeight: 'bold',     
      color: 'white',     
      backgroundColor: '#0E71B8',     
      fontFamily:'GothamNarrowMedium',    
      position: 'relative',   
      width: '100%',   
      // right: '412px' ,   
      // margin: '-56px 0px 0px 760px'   

      })

      var div = $('<div></div>');
      div.css({
      height: '30px',    
      paddingRight: '20px',    
      paddingLeft: '20px', 
      textAlign: 'center',    
      // letterspacing: '2px',    
      lineHeight: '28px',     
      overflow: 'hidden',    
      fontSize: '12px',     
      fontWeight: 'bold',     
      color: 'white',     
      backgroundColor: '#0E71B8',     
      fontFamily:'GothamNarrowMedium',    
      position: 'absolute',  
      //  width: '100%',    
      right: '412px' ,    
      margin: '-56px 0px 0px 760px',    
      hover :( 'color : #00A0DE')  

      })   

      var hcseen = [];    
      var gridseen = [];
        for (k=0; k<=2; k++ )
        {    
            griddiv = Math.floor((Math.random() * 3 ) + 1 );   
            gridcount = Math.floor((Math.random() * 3 ) + 1 );    
            hcount = Math.floor((Math.random() * 10) + 1);    
            if (!hcseen["s"+hcount] || !griddiv["s"+griddiv]) 
            {        
                 hcseen["s"+hcount] = 1;        
                 gridseen["s"+griddiv]=1;         
                 count = Math.floor((Math.random() * 3) + 1);                
                 div.clone().text("xyz "+ count + " add").insertAfter('#list-view .package-details-list:eq('+ hcount +')');                
                 gridp.clone().text("abc "+ count + " add").insertAfter('#grid-view .package-grid-row clearfix');         
    }                 
                else 
    {       
                k--;    
    }
    }
    }) (jQuery);

它适用于列表视图,我尽我所能,但它不适用于网格视图。 感谢。

1 个答案:

答案 0 :(得分:0)

我不确定我是否得到了你想要完成的内容,但现在这个文字已经出现了。我还将CSS更改移动到类以简化JS。

https://jsfiddle.net/qm1fwq85/1/

row.symbolize_keys!