javascript - 如何在 JavaScript 中以各种可能的方式动态创建新的 div、更改它、移动它、修改它？

Question

我想在页面加载时创建新的 div。这些 div 将显示为一个有序组，该组会根据 JSON 文件中的外部数据而变化。我需要使用 for 循环来执行此操作，因为需要 100 多个 div。

因此，我需要能够更改每个创建的 div 的高度、宽度、顶部/左侧等。然而，document.getElementById("created_div").style.whatever什么也没做，我什至看不到一个新的 div 出现。我已将新 div 的高度/宽度设置为 500 像素，将背景设置为“红色”等，但肯定不会出现新的 div。

我究竟做错了什么？

Answer 1

• 创建 var div = document.createElement('div');
• 添加 document.body.appendChild(div);
• 样式操作
  • 定位div.style.left = '32px'; div.style.top = '-16px';
  • 课程 div.className = 'ui-modal';
• 修改
  • ID div.id = 'test';
  • 内容（使用 HTML） div.innerHTML = '<span class="msg">Hello world.</span>';
  • 内容（使用文本） div.textContent = 'Hello world.';
• 移动 div.parentNode.removeChild(div);
• 访问
  • 按身份证 div = document.getElementById('test');
  • 按标签 array = document.getElementsByTagName('div');
  • 按班级 array = document.getElementsByClassName('ui-modal');
  • 通过 CSS 选择器（单个） div = document.querySelector('div #test .ui-modal');
  • 通过 CSS 选择器（多） array = document.querySelectorAll('div');
• 关系（包括文本节点）
  • 孩子们 node = div.childNodes[i];
  • 兄弟 node = div.nextSibling;
• 关系（仅限 HTML 元素）
  • 孩子们 element = div.children[i];
  • 兄弟 element = div.nextElementSibling;

这涵盖了 DOM 操作的基础知识。请记住，要使新创建的节点在文档中可见，需要将元素添加到正文或包含正文的节点。

Answer 2

你试过jQuery吗？香草 javascript 可能很难。尝试使用这个：

$('.container-element').add('<div>Insert Div Content</div>');

.container-element是一个 JQuery 选择器，它使用“容器元素”类标记元素（大概是您要插入 div 的父元素）。然后该add()函数将 HTML 插入到容器元素中。