我想在页面加载时创建新的div。这些div将显示为一个有序组,它根据JSON文件中的外部数据而变化。我需要使用for循环执行此操作,因为需要超过100个div。
所以,我需要能够在高度,宽度,顶部/左侧等方面更改每个创建的div。然而,document.getElementById("created_div").style.whatever
什么也没做,我甚至看不到一个新的div出现。我将新div的高度/宽度设置为500px,背景设置为“红色”,依此类推,但没有新的div显然出现。
我究竟做错了什么?
var div = document.createElement('div');
document.body.appendChild(div);
div.style.left = '32px';
div.style.top = '-16px';
Classes div.className = 'ui-modal';
div.id = 'test';
contents (using HTML) div.innerHTML = '<span class="msg">Hello world.</span>';
contents (using text) div.textContent = 'Hello world.';
div.parentNode.removeChild(div);
div = document.getElementById('test');
by tags array = document.getElementsByTagName('div');
by class array = document.getElementsByClassName('ui-modal');
by CSS selector (single) div = document.querySelector('div #test .ui-modal');
by CSS selector (multi) array = document.querySelectorAll('div');
node = div.childNodes[i];
sibling node = div.nextSibling;
element = div.children[i];
sibling element = div.nextElementSibling;
这涵盖了DOM操作的基础知识。请记住,新创建的节点在文档中可见,需要向主体或包含主体的节点添加元素。
你试过JQuery吗?香草javascript可能很难。试试这个:
$('.container-element').add('<div>Insert Div Content</div>');
.container-element
是一个JQuery选择器,它使用类“container-element”标记元素(可能是您要在其中插入div的父元素)。然后add()
函数将HTML插入container-element。