How to click to add a box in javascript

WBOY
Release: 2022-01-19 10:40:40
Original
2597 people have browsed it

Method: 1. Bind the click event to the button element and specify the event processing function; 2. Use the append() method in the event processing function to achieve the effect of clicking to add a box. The syntax is "specify element object. append("Inserted box element");".

How to click to add a box in javascript

The operating environment of this tutorial: Windows 10 system, JavaScript version 1.8.5, Dell G3 computer.

How to click to add a box in javascript

append() method inserts the specified content at the end of the selected element.

The syntax is:

$(selector).append(content,function(index,html))
Copy after login

The parameters are as follows:

How to click to add a box in javascript

##The example is as follows:


<html>
<head>
<meta charset="utf-8">
<title>123</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <div>这是一个插入进来的div</div>");
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落</p>
<button id="btn1">在段落后添加一个div</button>
</body>
</html>
Copy after login
Output result:

How to click to add a box in javascript

After clicking the button:

How to click to add a box in javascript##Related recommendations:

javascript learning tutorial

The above is the detailed content of How to click to add a box in javascript. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template