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>

动态添加内容到网站

2 个答案: