动态添加内容到网站

Question

我有一个网站，并在主页上，有一个窗体可以在同一页面上创建div。该表格有div的名称，div的颜色，div的左上角坐标（例如，条目可以是[50 70]）和div右下角的坐标（用于例如，该条目可以是[780 800]）。我需要能够使用指定参数在页面上动态创建div的代码，因此我无需亲自编辑源代码 - 以便用户可以进来，填写表单并将div分配给被创建。有没有人有任何想法如何做到这一点？提前致谢。

Answer 1

您可以通过理解此代码来解决问题。

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 
    } 

Answer 2

在这里你去

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>