Can someone explain why the following snippet does not add
to both #a
and #b
?
HTML:
You need to create a new instance
every single time you want to append to the DOM.
Otherwise it refers to the same instance which was already appended.
Remove the $
symbol preceding the new div to be added as that evaluates to a jQuery object and has the limitations as above stated. or clone
the element.
$(function(){
var foo = "<foo>HI</foo>";
$("#a").append(foo);
$("#b").append(foo);
});
Check Fiddle
I tried a trick and it worked. I just nested the function of one button click in another. i mean I am changing the parent every time to avoid this issue. the main thing is that when i am writing the click function for button1 click the button2 logic is written under that and the button3 click logic is written inside button2 click method like a hierarchy. Just see the code. you will get it.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<h1>DOM Element Inserting!</h1>
<div id="parent">
<div id="result">
<button id="btn1" type="submit" class="btn btn-primary">
Start Cooking
</button>
</div>
</div>
<div id="parent2"></div>
<div id="parent3"></div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"
></script>
<script>
$(document).ready(function () {
$("#btn1").click(function () {
$("#lt").remove();
$("#parent2").html(`
<button id="btn2" type="button" class="btn btn-success">
Being Prepared
</button>
`);
$("#btn1").remove();
$("#btn2").click(function () {
$("#parent3").html(`
<button id="btn3" type="button" class="btn btn-info">
Order Ready
</button>
`);
$("#parent2").remove();
$("#btn3").click(function () {
alert("Order Completed!!");
});
});
});
});
</script>
</body>
</html>
Try clone
. This, as the name implies, will copy the $foo
element and not move, like append
will do.
$(function(){
var $foo = $("<foo>HI</foo>");
$("#a").append($foo.clone());
$("#b").append($foo.clone());
});
But, why not just use this?
$("#a,#b").append($foo);
This will also work :)
Here's a demo for both these situations : http://jsfiddle.net/hungerpain/sCvs7/3/
You can use the .clone() method to create a new instance to append to the DOM, since your current code just refers to the same instance twice.
$(function(){
var $foo = $("<foo>HI</foo>");
var $foo2 = foo.clone();
$("#a").append($foo);
$("#b").append($foo2);
});
Because using append
actually moves the element. So your code was moving $foo
into the document at #a
, then moving it from #a
to #b
. You could clone it instead like this for your desired affect - this way it is appending a clone rather than the initial element:
$(function(){
var $foo = $("<foo>HI</foo>");
$("#a").append($foo.clone());
$("#b").append($foo.clone());
});
You could also append the html
from $foo
, which would just take a copy of the dom within it rather than the element itself:
$(function(){
var $foo = $("<foo>HI</foo>");
$("#a").append($foo[0].outerHTML);
$("#b").append($foo[0].outerHTML);
});
The above examples are assuming you have a more complicated scenario where $foo
isn't just a jQuery object created from a string... more likely it is created from an element in your DOM.
If it is in fact just simply created this way and for this purpose... there is no reason at all to create that jQuery object to begin with, you could simply append the string itself ("<foo>HI</foo>"
) directly, like:
var foo = "<foo>HI</foo>";
$("#a").append(foo);
//...