时间戳

首页 > 解决方案 > 如何创建元素 JavaScript BASIC

javascript - 如何创建元素 JavaScript BASIC

问题描述

每次调用该squareGenerator()函数时，我都想创建一个具有 CSS 属性的新元素，但它没有这样做。

function squareGenerator() {
var newSquare = document.createElement("div");

this.newSquare.css({"background-color": "yellow", "height": "200px", "width": "200px"});







  $('.father').append(newSquare);
}

squareGenerator()
body{
  padding: 0;
  margin: 0;
}

.father{
width: 100%;
height: 1000px;
background-color: lightblue;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>NovaNote</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
<div class="father">

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="function.js" charset="utf-8"></script>
  </body>
</html>

标签： javascript

解决方案

为了应用该.css()函数，它是一个 jQuery 函数，您需要对一个 jQuery 对象进行操作。在我的例子中注意：$(newSquare).css().

function squareGenerator() {
   var newSquare = document.createElement("div");

   $(newSquare).css({"background-color": "yellow", "height": "200px", "width": "200px"});
   $('.father').append(newSquare);
}

squareGenerator()
body{
  padding: 0;
  margin: 0;
}

.father{
width: 100%;
height: 1000px;
background-color: lightblue;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>NovaNote</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
<div class="father">

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="function.js" charset="utf-8"></script>
  </body>
</html>

推荐阅读