Append element using jquery selector - javascript

I need to recreate and append my template div to the parent div on button click and this can be done multiple times
<div id = "parent">
<div id = "child_1">
<div><input type = "text"></div>
<div><input type = "text"></div>
//several inputs and divs
</div>
</div>
and my script
//on button click event
var template = $("#parent").children().last();
template.attr("id","child_2"); //just a sample of dynamic id
$("#parent").append(template);
But this doesn't work

You need to clone() a copy of the child before you append it, otherwise you just put the current element back in its original position.
var template = $("#parent").children().last().clone();
Working example

Try with this:
var html = $("#parent").html();
var i = 1;
$("button").on("click",function(){
i++;
$("#parent").append(html.replace('id="child_1"','id="child_' + i + '"'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id = "parent">
<div id = "child_1">
<div><input type = "text"></div>
<div><input type = "text"></div>
//several inputs and divs
</div>
</div>
<button>Click</button>

Related

javascript replace node and all of it childs with anothe code

How can you replace HTML tag with all tags branching inside using Javascript with other HTML code?
example:
<div class="a">
<div class="sub-a1">
<div class="sub-a12">
</div>
</div>
<div class="sub-a2">
<div class="sub-b">
</div>
</div>
I wanna replace all tags from tag div class 'a' including all sub nodes with another code.
is that's possible?
please help me.
const target = document.querySelector(".a");
target.innerHTML = //place your html here as string
Yes, this is possible. If you want to keep the div.a elements and just change the "subnodes" you have to use innerHTML in stead of outerHTML.
const divs = [...document.getElementsByClassName("a")]; //make a copy of the HTML collection so that they can be removed without being removed in the array
const newElement = "<h1>Replaced Element</h1>"; //this is your replacement element
for (let i = 0; i < divs.length; i++) { // loop through all the divs
divs[i].outerHTML = newElement; // set the outer html for the div to the replacement elemzent
}
You can do with .replaceWith() with a valid HTML code.
function replace() {
var para = document.createElement("P"); // Create a <p> element
para.innerText = "This is a paragraph"; // Insert text
document.querySelector(".a").replaceWith(para);
}
<div class="a">
<div class="sub-a1">
<div class="sub-a12">
<h4>Sample content1</h4>
</div>
</div>
<div class="sub-a2">
<div class="sub-b">
<h4>Sample content2</h4>
</div>
</div>
</div>
<button onclick="replace();"/>Click to Replace</button>

Get elements by class name in a certain div through Javascript

I have:
<div class="f0">
<div class="input-text">
<t>Text</t>
</div>
</div>
var h = 0;
for(h;h<inputstext.length;h++){
var str = 'f' + h;
var currentDiv = document.getElementById(str);
}
How do I get only the input-text elements value that is in f0?
Output should be Text.
Thanks.
You can use the element[property*="val"] to select all elements with property beginning with "val" - in this case, any class that starts with "f", and then select their .input-text children.
Also, you're trying to get elements with id f0, when these divs are marked with class f0.
const inputs = document.querySelectorAll('[class*="f"] .input-text');
for (const element of inputs)
console.log(element.textContent.trim());
<div class="f0">
<div class="input-text">
inside f0
</div>
</div>
<div class="f1">
<div class="input-text">
inside f1
</div>
</div>

Data category - on click modification

I was wondering if there is a way to add new data-category to existing one once click event would happen?
I want to add it since I am using it as a filtering element.
An example below: Click the button and add the category: Delta
<div class="item" data-category="Alfa , Beta , Gamma ">
<p> Object 1<p>
<div>
<button class="my-fav">
You can get attributes of the element and change it then set it again, here is an example:
<div id="data" class="item" data-category="Alfa , Beta , Gamma ">
<p> Object 1<p>
</div>
<button id="myButton" class="my-fav">
<script>
const data = document.getElementById("data");
const button = document.getElementById("myButton");
let data_attribute = data.getAttribute("data-category");
myButton.addEventListener("click", function() {
data_attribute += ", Delta";
data.setAttribute("data-category", data_attribute);
});
</script>

Fill data into all of my spans

I have 8 spans, 4 of the spans with values retrieved from Database are visible when page loads. The other spans are in my own popup box, when a user clicks on the button to view the popup, the value from the spans that were visible needs to also be inside the spans within the popup box.
So I used a each() function with two classes, '.heart' is the class that has the first 4 spans which are visible when page loads. '.likes-count' is another class that has 4 spans within a popup box.
My aim is to assign whatever value is in the first 4 spans to the other spans within popup box.
Im currently stuck in the code below.
JS
$('.heart, .likes-count').each(function(i, element) {
var thisID = "#" + $(this).attr('id'); // '#like1', '#like2'
var getAgain = "." + $(thisID + " span").attr('class'); // .likeCount1
getAgain = $(getAgain).text();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You can iterate through the spans of your first div using jQuery's each. The callback function of each gives you an index parameter which you can use to select the corresponding indexed span of the other div.
$("#hearts span").each(function(index){
var text = $(this).text();
$("#likes span").eq(index).text( text );
});//each
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="hearts">
<span>12</span>
<span>24</span>
<span>36</span>
<span>48</span>
</div>
<div id="likes">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
try this:
$('.heart').each(function(i) {
$('.likes-count:eq('+i+')').text($(this).text())
});
You can use callback function of .text() instead of using .each() to achieve this:
var heartspans = $("#hearts span");
$("#likes span").text(function(i,o){
return heartspans.eq(i).text();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="hearts">
<span>12</span>
<span>24</span>
<span>36</span>
<span>48</span>
</div>
<div id="likes">
<span></span>
<span></span>
<span></span>
<span></span>
</div>

change the element from the variable

i have a dom which i am copying in variable.
I want to replace the particular element from the variable with another element.
<div id="parent">
<section id="1"></section>
<section id="2"></section>
<section id="3"></section>
<section id="4"></section>
</div>
This i have copied in variable. Now no relation with dom
I want to change it to
<div id="parent">
<img id="5"></img>
<section id="2"></section>
<section id="3"></section>
<section id="4"></section>
</div>
This is what i am trying
var target = document.getElementById('parent');
var wrap = document.createElement('div');
wrap = wrap.appendChild(target.cloneNode(true));
Try this.
$('#parent').children().each(function(){
var ids = $(this).attr('id');
$(this).replaceWith( '<img id="'+ids+'"/>' );
});
Fiddle Demo
var target = document.getElementById('parent');
var wrap = document.createElement('div');
wrap = wrap.appendChild(target.cloneNode(true));
$(wrap).find("#1").html("<img id='5'></img>");
This works like a charm....without changing the dom

Categories