I created a link (<a>) and a <div> field underneath. My goal is to add a <select> dropdown (preferably enclosed in another <div>) to the <div> field by pressing the <a> link. I easily managed to append simple elements using the following snippet:
$(document).ready(function(){
$(".dropdown-btn").click(function(){
$(".canvas").append("<span>Appended text</span>");
});
});
but had no luck when trying to append a more complicated element:
$(document).ready(function(){
$(".dropdown-btn").click(function(){
$(".canvas").append("""<div><form>
<select name="dropdown" id="dropdown">
<option value="1">1</option>
<option value="2">2</option>
</select>
</form><div>""");
});
});
My full code, in a single file:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".dropdown-btn").click(function(){
$(".canvas").append("""<div><form>
<select name="dropdown" id="dropdown">
<option value="1">1</option>
<option value="2">2</option>
</select>
</form><div>""");
});
});
</script>
<style>
.canvas {
height: 50vw;
width: 90vw;
background-color: powderblue;
border:2px solid grey;
}
</style>
</head>
<body>
<a href="#" class="dropdown-btn">Create Dropdown</a>
<div class="canvas"></div>
</body>
</html>