2016-05-15 428 views
0

我有一個網站,並在主頁上,有一個窗體可以在同一頁面上創建div。該表格有div的名稱,div的顏色,div的左上角座標(例如,條目可以是[50 70])和div右下角的座標(用於例如,該條目可以是[780 800])。我需要能夠使用指定參數在頁面上動態創建div的代碼,因此我無需親自編輯源代碼 - 以便用戶可以進來,填寫表單並將div分配給被創建。有沒有人有任何想法如何做到這一點?提前致謝。動態添加內容到網站

+0

那麼,你必須使用JavaScript(周圍沒辦法)和IM爲某個事件補充處理程序,可能是「創建」按鈕或類似事件上的單擊事件。該處理函數從窗體讀取值並創建一個元素並將其插入到DOM樹中。 – arkascha

回答

0

您可以通過理解此代碼來解決問題。

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 
    } 
+0

謝謝你們,我會試試這些。 –

0

在這裏你去

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>

+0

非常感謝! :) –

+0

我還沒有機會嘗試這些解決方案,但我很快就會做 - 這是當我將標記答案。謝謝。 –

+0

但是,在我離開頁面後,使用此方法創建的div會消失 - 整個想法是讓div保持不變,這樣,如果用戶創建div,離開頁面然後又回到頁面,或者如果其他人訪問該頁面,該div應該仍然在那裏。 –