Question

我正在使用jquery创建一个元素，然后我希望用户输入元素所需位置的x和y值，然后单击一个按钮，以便该元素出现在该位置。这是页面设置的粗略代码。希望在填写表格并单击按钮后#newelement出现在新位置。

<!DOCTYPE html>   
<html>   

<head>  
    <title>  
        Create div element using jQuery 
    </title> 

    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 

    <style> 
        #parent { 
            height: 300px; 
            width: 600px; 
            background: green; 
            margin: 0 auto; 
        } 
        #newElement { 
            height: 100px; 
            width: 100px; 
            margin: 0 auto; 
            background-color: red;
            position: absolute;
        } 
    </style> 
</head>  

    <div id= "parent"></div> 

    <br><br> 

    <!-- Script to insert div element -->
    <script>  
        function insert() { 
            $("#parent").append('<div id = "newElement">A ' 
                + newdiv </div>'); 
        } 


    </script>  
 <button onclick="insert()">  
        insert 
    </button> 

    <form id="form1">
  <b>First Name:</b> <input type="text" name="positionX">
    <br><br>
  <b>Last Name: </b><input type="text" name="positionY">

  <input type="submit" value="Submit">
</body>   

</html>

Answer 1

如果要相对于父级的左上角放置新div的左上角，可以使用“ top”和“ left”样式属性。

即像

<!DOCTYPE html>
<html>

<head>
  <title>
    Create div element using jQuery
  </title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>
  <style>
    #parent {
      height: 300px;
      width: 600px;
      background: green;
    }
    
    #newElement {
      height: 100px;
      width: 100px;
      background-color: red;
      position: absolute;
    }
  </style>
</head>

<body>
  <div id="parent"></div>

  <!-- Script to insert div element -->
  <script>
    function insert() {
      // Get the X and Y from the form elements
      var x = parseInt($("[name='positionX'").val());
      var y = parseInt($("[name='positionY'").val());
      var newElement = $('<div id="newElement">newdiv</div>').css({top: y, left:x});
      $("#parent").append(newElement);
    }
  </script>
  <button onclick="insert()">  
        insert 
    </button>
  <form id="form1">
    <b>X:</b><input type="text" name="positionX" />
    <br />
    <b>Y:</b><input type="text" name="positionY" />
    <input type="submit" value="Submit" />
  </form>
</body>

</html>

如何使用jquery

1 个答案: