我有一个网站,并在主页上,有一个窗体可以在同一页面上创建div。该表格有div的名称,div的颜色,div的左上角坐标(例如,条目可以是[50 70])和div右下角的坐标(用于例如,该条目可以是[780 800])。我需要能够使用指定参数在页面上动态创建div的代码,因此我无需亲自编辑源代码 - 以便用户可以进来,填写表单并将div分配给被创建。有没有人有任何想法如何做到这一点?提前致谢。动态添加内容到网站
回答
您可以通过理解此代码来解决问题。
HTML
<input type="text" name="value" id='value' />
<input type="button" value="submit" onclick="createDiv()" />
</p>
JS:
function createDiv() {
var divName = document.getElementById('value').value; //getting value for div name
var iDiv = document.createElement('div'); //creating div element
iDiv.name = divName;
document.getElementsByTagName('body')[0].appendChild(iDiv) //adding it in DOM tree
}
谢谢你们,我会试试这些。 –
在这里你去
function CreateDiv() {
var name = document.getElementById('name').value;
var color = document.getElementById('color').value;
var ulcorner = document.getElementById('ulcorner').value;
var brcorner = document.getElementById('brcorner').value;
var top = parseInt(ulcorner.split(',')[0]);
var left = parseInt(ulcorner.split(',')[1]);
var bottom = parseInt(brcorner.split(',')[0]);
var right = parseInt(brcorner.split(',')[1]);
var newDiv = document.createElement("div");
newDiv.style.backgroundColor = color;
newDiv.style.top = top + 'px';
newDiv.style.left = left + 'px';
newDiv.style.height = (top + bottom) + 'px';
newDiv.style.width = (left + right) + 'px';
var container = document.getElementById("container");
container.appendChild(newDiv);
}
Name : <input type='text' id='name' /><br />
Color : <input type='text' id='color' /><br />
Coordinates of the upper left corner :
<input type='text' id='ulcorner' placeholder='xx,xx' /><br />
Coordinates of the lower right corner :
<input type='text' id='brcorner' placeholder='xx,xx' /><br />
<button onclick='CreateDiv()'>Create Div</button>
<div id='container'></div>
非常感谢! :) –
我还没有机会尝试这些解决方案,但我很快就会做 - 这是当我将标记答案。谢谢。 –
但是,在我离开页面后,使用此方法创建的div会消失 - 整个想法是让div保持不变,这样,如果用户创建div,离开页面然后又回到页面,或者如果其他人访问该页面,该div应该仍然在那里。 –
- 1. 网站动态内容
- 2. 将HTML内容添加到Flash网站
- 3. 将furigana添加到网站内容
- 4. 动态添加内容
- 5. 烬动态添加内容
- 6. 添加内容动态
- 7. 将内容动态添加到jsp站点
- 8. 添加内容到动态fancybox
- 9. 动态添加内容到UIScrollView
- 10. 动态地将内容添加到div
- 11. 添加动态行到邮件内容
- 12. 动态添加内容到UICollectionView
- 13. 动态添加内容到菜单
- 14. 动态添加asp:内容到页面
- 15. 动态添加内容到hubsection xaml
- 16. Web动态javascript内容抓取网站
- 17. Unity将内容动态地添加到NGUI网格
- 18. 如何添加动态内容捆绑到asp.net网页优化
- 19. 动态记录内容添加到vaadin电网
- 20. 仅将内容添加到目标网页或WordPress网站
- 21. 将外部网页内容添加到网站Feed
- 22. 滚动型不添加内容动态
- 23. LinearLayout - 滚动时动态添加内容
- 24. 如何通过动态内容加载来抓取网站?
- 25. 动态网站加上从CMS分离的内容交付
- 26. 动态加载网页内容
- 27. 动态加载网页内容
- 28. 将基于Java的内容添加到网站
- 29. 我想从我的网站添加内容到html永久
- 30. 如何将非MVC(html内容)添加到MVC网站?
那么,你必须使用JavaScript(周围没办法)和IM为某个事件补充处理程序,可能是“创建”按钮或类似事件上的单击事件。该处理函数从窗体读取值并创建一个元素并将其插入到DOM树中。 – arkascha