动态向网站添加内容

Question

I have a website, and on the main page, there is a form to create div's on that same page. The form has entries of name of the div, color of the div, coordinates of the upper left corner of the div (for example, the entry can be [50 70]) and the coordinates of the lower right corner of the div (for example, the entry can be [780 800]). I need the code that will enable me to dynamically create div's on the page with the specified parameters, so I don't have to edit the source code myself - so that the user can come in, fill out a form, and the div to be created. Does anyone have any ideas on how this can be done? Thanks in advance.

Answer 1

You can work around by understanding this code.

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

Here you go

 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>