動態添加內容到網站

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>