js动态创建多个div

Posted 2023-05-11

如何才能用js 动态创建多个div的标签呢 比如php返回7个数组 创建7个这样的标签 。 麻烦各位啦 谢谢

<div class="p-l-20 p-r-20 p-b-10 p-t-10 b-b b-grey">
<div class="pull-left">
<p class="text-important">PHP返回值</p>
<p class="text-black">PHP返回</p>
</div>
<div class="pull-right">
<p class="text-black">PHP返回</p>
<span class="label label-success" style="vertical-align: bottom;" >PHP返回</span>
</div>
<div class="clearfix"></div>
</div>

<div id="abc"></div>
<script>
//你也没说一下php返回的数据结构究竟是怎样的。我假定是下面这样的:
var res=[
    a:1,b:2,c:23,d:34,
    a:231,b:2,c:39,d:14,
    a:1,b:2,c:453,d:784,
    a:981,b:1221,c:33,d:124,
    a:1,b:2,c:334,d:41243,
    a:12341,b:2,c:563,d:47,
    a:5121,b:1232,c:433,d:24
];
document.getElementById("abc").innerhtml=res.map(function(o)
    var html="";
    html+='<div class="p-l-20 p-r-20 p-b-10 p-t-10 b-b b-grey">';
    html+='<div class="pull-left">';
    html+='<p class="text-important">'+o.a+'</p>';
    html+='<p class="text-black">'+o.b+'</p>';
    html+='</div>';
    html+='<div class="pull-right">';
    html+='<p class="text-black">'+o.c+'</p>';
    html+='<span class="label label-success" style="vertical-align: bottom;" >'+o.d+'</span>';
    html+='</div>';
    html+='<div class="clearfix"></div>';
    html+='</div>';
    return html;
).join("");
</script>

追问

为啥运行起来什么都没有
返回值是 var hq_str_sh601006="大秦铁路,8.970,8.980,9.010,9.040,8.920,9.010,9.020,20529568,184450443.000,16900,9.010,73812,9.000,186600,8.990,141400,8.980,71200,8.970,555740,9.020,173500,9.030,429100,9.040,920100,9.050,210900,9.060,2018-08-24,15:00:00,00";

这种类型的 只需要四个 601006 大秦铁路 8.970 8.980

参考技术A var Shu =7;
for (i=0;i<Shu;i++)
var objdiv = document.createElement("div");
objdiv .innerHTML = i+1;
document.body.appendChild(objdiv );
追问

这个不行

如何为多个动态 div 设置多个 Cookie

【中文标题】如何为多个动态 div 设置多个 Cookie

【英文标题】：How to Set Multiple Cookies for Multiple Dynamic Divs

【发布时间】：2021-08-13 18:50:59

【问题描述】：

希望帮助为多个动态 div 设置多个 cookie。

我可以为 1 个 div 设置 1 个 cookie，但是，当我将超过 1 个项目/div 添加到购物车时，cookie 只会设置在第一个子/div 上。

添加到购物车的 div 数量始终是未知的并且是动态生成的...如何为每个添加的购物车项目创建唯一的 cookie？

非常感谢您的时间和帮助！任何帮助将不胜感激， 史蒂夫。

此处提供代码

 $('#bag_active').on('click', '.add-to-cart', function setCookie()   
    alert("COOKIES SET");

    var customObject = ;

    customObject.name = document.getElementById("cart_product_name").value;
    customObject.price = document.getElementById("cart_product_price").value;

    var jsonString = JSON.stringify(customObject);

    document.cookie = "cookieObject=" + jsonString;
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="bag_active" class="product-card">
    <h1 class="title">Cookie Title 1</h1>
    <h2 class="subtitle">Cookie Price 1</h2>
    <button id="1" type="button" class="btn add-to-cart" aria-pressed="true" onclick="setCookie()">Add to Bag</button>
    <input type="hidden" id="cart_product_name" name="Cookie Name 1" value="Cookie Name 1">
    <input type="hidden" id="cart_product_price" name="Cookie Price 1" value="Cookie Price 1">
</div>

<div id="bag_active" class="product-card">
    <h1 class="title">Cookie Title 2</h1>
    <h2 class="subtitle">Cookie Price 2</h2>
    <button id="2" type="button" class="btn add-to-cart" aria-pressed="true" onclick="setCookie()">Add to Bag</button>
    <input type="hidden" id="cart_product_name" name="Cookie Name 2" value="Cookie Name 2">
    <input type="hidden" id="cart_product_price" name="Cookie Price 2" value="Cookie Price 2">
</div>

<div id="bag_active" class="product-card">
    <h1 class="title">Cookie Title 3</h1>
    <h2 class="subtitle">Cookie Price 3</h2>
    <button id="3" type="button" class="btn add-to-cart" aria-pressed="true" onclick="setCookie()">Add to Bag</button>
    <input type="hidden" id="cart_product_name" name="Cookie Name 3" value="Cookie Name 3">
    <input type="hidden" id="cart_product_price" name="Cookie Price 3" value="Cookie Price 3">
</div>

【问题讨论】：

读取之前设置的cookie，解析，添加新信息，序列化并再次存储。

@aleksxor 非常感谢，讨厌成为那个人，哈哈，但你是怎么做到的？

【参考方案1】：

我假设您将点击处理程序重写为：

// some cookie helpers in vanilla-js. or you can use a library to work with cookies
function getCookie(name, text) 
  if (typeof text !== 'string') return null

  var nameEQ = `$name=`
  var ca = text.split(/[;&]/)

  for (var i = 0; i < ca.length; i += 1) 
    var c = ca[i]
    while (c.charAt(0) === ' ') 
      c = c.substring(1, c.length)
    
    if (c.indexOf(nameEQ) === 0) 
      return c.substring(nameEQ.length, c.length)
    
  

  return null


function parseCookie(cookie) 
  try 
    return JSON.parse(cookie)
   catch (err) 
    return null
  

// --- end cookie helpers ---

$('#bag_active').on('click', '#checkout_button', function setCookie() 
  var cookieObject = parseCookie(getCookie('cookieObject', document.cookie)) ||  orders: [] 

  if (!Array.isArray(cookieObject.orders)) throw new Error('Malformed cookie!')

  var newOrder = 
  newOrder.name = document.getElementById("cart_product_name").value
  newOrder.price = document.getElementById("cart_product_price").value
  cookieObject.orders.push(newOrder)

  var jsonString = JSON.stringify(cookieObject)

  document.cookie = "cookieObject=" + jsonString
)

【讨论】：

这对于动态“添加到购物车”非常有效，当然我需要更新心理模型/工作流程，以便 cookie 存储发生在“添加到购物车”而不是“购物车提交”上，所以很有远见在你那里。谢谢❤️

我在这里提出了另一个问题，它围绕 JSON 字符串中的“删除/删除”cookie，当它们设置的项目被删除时...问题在这里：***.com/questions/67807134/… - 如果你有时间:)