如何在某些父 div 中附加这些嵌套 div

Posted 2023-05-07

【中文标题】如何在某些父 div 中附加这些嵌套 div

【英文标题】：How do I append these nested divs in some parent div

【发布时间】：2017-05-09 17:24:06

【问题描述】：

我有以下代码，我想在父 div 中添加它

<div style="width: 100%; overflow: hidden;">
<div style="width: 10%; float: left;"> <div><img src="assets/img/abc.png" style="height: 35;margin-left: 10; margin-right: 5px;"/></div> <div id="toro" style="color: black">  Hi </div></div>
<div style="margin-left: 25%;"><div style="margin-top: 7;
font-weight: bold; color: black">  <b>hie</b></div> <div style="color: black" >  Hello  </div><div style="float: right" id="time">time</div></div>

【问题讨论】：

Add/remove html inside div using javascript的可能重复

请包含用于创建 HTML 的代码，因为我们可能会帮助您重构该代码。

【参考方案1】：

添加<div>的例子

这里已经回答了 Add/remove HTML inside div using JavaScript

var jsonArr = [
    'id': 1,
    'name': 'RAJ'
  , 
    'id': 2,
    'name': 'RAY'
  , 
    'id': 3,
    'name': 'RAM'
  ];

  function addDiv() 
    for (var i = 0; i < jsonArr.length; i++) 
      var div = document.createElement('div');
      div.innerHTML = '<div style="width: 100%; overflow: hidden;">' +
        '<div style="width: 10%; float: left;">' +
        '<div><img src="assets/img/abc.png" style="height: 35;margin-left: 10; margin-right: 5px;"/></div> <div id="toro" style="color: black">' + jsonArr[i].id + '</div>' +
        '</div>' +
        '<div style="margin-left: 25%;">' +
        '<div style="margin-top: 7;font-weight: bold; color: black">  <b>hie</b></div> <div style="color: black" >' + jsonArr[i].name + '</div><div style="float: right" id="time">'+new Date()+'</div></div>';

      document.getElementById('parent').appendChild(div);
    
  

<div id="parent">Parent div
</div>
<button onClick="addDiv()">Add Div</button>

【讨论】：

我的 div 是嵌套的并且是多个的，所以如果你能帮助我创建我的 div，我会接受你的回答

是否要动态添加多个 ？还是您的孩子 总是一样？ 我在 API 响应中得到了 json 数组，然后我使用 for 循环遍历它，在每次迭代时我都必须在这个 html 代码中附加一些值。 基本上它代表列表视图的一行 如何为这个 div 添加 onclick 事件？