极客教程如何用jQuery创建一个带有style标签的div
如何用jQuery创建一个带有style标签的div,可以通过以下步骤完成。
步骤:
- 创建一个新的
<
div>元素。
* 创建一个带有我们想要应用的所有样式的对象。
* 选择一个父元素，将这个新创建的元素放在那里。
* 将创建的div元素放入父元素。
例子1：这个例子将创建一个<div>元素。 并使用append()方法将该元素附加在父元素的末尾。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js">
</script>
<style>
.divClass {
height: 40px;
width: 200px;
border: 1px solid blue;
color: white
}
</style>
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<div id="parent">
This is parent div
</div>
<div style="height:10px;"></div>
<!-- JavaScript function addText() is called to add to parent div-->
<input type="button" value="Add <div> Text" onclick="addText()" />
<script>
<!-- Function to add text in a div element with above styles-->
function addText() {
(document).ready(function() {
var object = {
id: "divID",
class: "divClass",
css: {
"color": "Red"
}
};
var addition =("<div>", object);
addition.html("Added text GFG");
$("#parent").append(addition);
});
}
</script>
</body>
</html>
输出:
append
例子2：这个例子将创建一个<div>元素。 并使用prependTo()方法在父元素的开始处追加该元素。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js">
</script>
<style>
.divClass {
height: 40px;
width: 200px;
border: 1px solid blue;
color: white
}
</style>
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<div style="height:10px;"></div>
<div id='parent'>
This is parent div
</div>
<div style="height:10px;"></div>
<input type="button"
value="Prepend text div "
onclick="prependDiv()" />
<script>
function prependDiv() {
(document).ready(function() {
var object = {
id: "divID",
class: "divClass",
css: {
"color": "Red"
}
};
<!--Prepend object is created before the parent div-->
var prependObject =("<div>", object);
prependObject.html("Prepend text is GFG");
(prependObject).prependTo(('#parent'));
});
}
</script>
</body>
</html>
输出:
Prepend text