JQuery append method multiple parent elements append same element - javascript

As the API document declared:
If an element selected this way is inserted into a single location
elsewhere in the DOM, it will be moved into the target (not cloned).
Important: If there is more than one target element, however, cloned
copies of the inserted element will be created for each target except
for the last one.
var div = $("<div></div>").addClass("divCells"),
tdName = $("<td></td>").addClass("tdName"),
tdAge = $("<td></td>").addClass("tdAge"),
tdGender = $("<td></td>").addClass("tdGender"),
tds = [tdName, tdAge, tdGender],
tr = $("<tr></tr>"),
tbody = $("#peopleList tbody");
tds.append(div);
tr.append(tdName).append(tdAge).append(tdTimetdGenderstamp);
tbody.append(tr);
As above code represents, I try to include the 3 tds in to an Array, so that I could append div into all of them, but it is not working.

You're trying to use jQuery .append on a vanilla JavaScript Array. .append only works on jQuery/DOM elements, not JavaScript types such as Arrays.
Your tds array contains jQuery/DOM elements, but the Array itself isn't 'appendable' in the manner you're attempting.
Using an Array, you'll have to iterate through your array, and manually append the div to each element in it. Furthermore, since you will be appending to 3 separate elements individually (i.e. 1 per iteration, not all 3 at the same time) you'll have to manually .clone the div yourself, otherwise you'll just be appending the one div to the 1st item in the Array, and then moving the same div to the 2nd, and again to the 3rd. So...
// tds.append(div); // Change this to...
for (var i=0; i< tds.length; i++) {
tds[i].append(div.clone())
}
OR...
You could forget about using the Array altogether, and have jQuery clone and append the div for you (as your original question implied). Here's how...
// Remove the following lines...
// tds = [tdName, tdAge, tdGender],
// tds.append(div);
// Then, after you add the td's to your row here...
tr.append(tdName).append(tdAge).append(tdGender);
// ...have jQuery find all the td's and clone+append your div to them in one hit:
tr.find('td').append(div)

Related

insertBefore attaching element only at the last element of a loop

I have a set of rows where I want to add another set of rows. I'm trying to do it as loop all the rows and then on each row I did insertAfter operation.
let rows_to_be_attached = parent_tr.nextAll().not('.newly-rows');
let rows_to_attach = parent_tr.nextAll('tr.newly-rows').not('.mia');
$(rows_to_be_attached).each(function(i, el) {
$(rows_to_attach).insertAfter($(el));
}
It only attached the rows_to_attach 'tr's' at the last el. Why?
You are inserting the same element on each loop so it will move from the previously inserted place in DOM instead of that clone and insert it.
$(rows_to_be_attached).each(function(i , el){
added_rows.clone().insertAfter($(el));
})
If there is multiple and you want to insert one by one then use the index to get the element.
$(rows_to_be_attached).each(function(i , el){
added_rows.eq(i).insertAfter($(el));
})

Jquery clone method to clone mutliple (more than one) div's (not a single div multiple times) inside a page

I need a method to clone say 4 div's with id's like d_1, d_2, d_3, d_4
including the contents inside each div all at once and then detach all divs, and then I need to find copy of d_1 and its contents from the clone and append it again to the page.
something like:
var cloned=$('[id^="d_"]').clone();
$('[id^="d_"]').detach();
and then find div with id =d_1 from clone and append it to body.
Is it possible?
Use Document Fragment.
var $documentFragment = $(document.createDocumentFragment());
$('[id^="d_"]').each(function(){
$documentFragment.append($(this).clone().addClass("_cloned"));
});
$documentFragment.clone().appendTo(document.body);
If you want looking for an element into the fragment, you can do this:
$(document.body).find("#d_1._cloned"). ... ;
If you want to remove all the element and then append only the first copied into fragment:
$("._cloned", document.body).remove();
$documentFragment.find("#d_1").clone().appendTo(document.body);
You can appendTo() an element to detach and move an element elsewhere.
var els = $('[id^="d_"]')
els.detach();
els.each(function() {
if (this.id.indexOf('d_1') !== -1) {
$(this).appendTo(document.body);
}
});
// do something else with els later, too.

Append child in DOM table

I am using clone to add new row to the DOM table dynamically from a button click event like below mentioned. but i want to append the cloned node to a specific row position in the DOM table. i know i can do that by using "insertrow" option but i want to use this using clone.
var newNode = tblBody.rows[1].cloneNode(true);
tblBody.appendChild(newNode);
is there any way to insert or append the "newNode" in a position i dynamically choose rather appending it as last row.
Use .insertBefore() from tblBody, and pass the newNode as teh first argument, and the child of tblBody before which the node should be inserted as the second argument.
// put this node----v before this----v
tblBody.insertBefore(newNode, tblBody.rows[i]);
If tblBody.rows[i] is null or undefined, then .insertBefore() will just behave like .appendChild(), and put it at the end.
node.insertBefore() is what you are looking for: https://developer.mozilla.org/en-US/docs/Web/API/Node.insertBefore

Is it possible transform one DOM element to another? Or copy all attributes from it? [duplicate]

This question already has answers here:
How to copy all the attributes of one element and apply them to another?
(12 answers)
Closed 3 years ago.
Is it possible transform one DOM element to another?
By jQuery or even by JavaScript.
I just to want for example:
get table > thead > tr > th's with all classes, attributes, properties and put it in table > body like as tr > td.
Or maybe is another way for that?
You have a couple options.
You can use jQuery's clone(), which will copy everything on/in the DOM node. Then use append() to attach the clone to whatever element you want it moved to. Then just remove the original node.
If you just want the attributes from the DOM node (classes, id, etc.) then you can use the attributes array that is present on all DOM nodes. You'd have to loop through each attribute and then set it on the new element individually though. I have yet to find a simple way to just copy everything over. In vanilla Javascript that would look something like this:
var originalELement = document.getElementById('original-element-id');
var newElement = document.createElement('div');
for (var i = 0; i < originalElement.attributes.length; i++) {
var attr = originalElement.attributes.item(i);
newElement.setAttribute(attr.nodeName, attr.nodeValue);
}
when you do element1.append(element2) element2 will move inside element1. append or appendChild. weird but true. append actually means "cut"

remove div without an id tag

I need a solution to remove a div without an ID tag in JavaScript only. The div looks like this <div align="center">.
Here is the full structure.
<tr id="-1">
<td class="stxt">
<div align="center">
</div>
</td>
</tr>
You need to work out how to get a reference to it, once you've done that, you can remove it using:
div.parentNode.removeChild(div);
Of course the align attribute has been deprecated, but anyway, you can find the divs with align="center" using:
var divs = document.getElementsByTagName('div');
var div;
var i = divs.length;
while (i--) {
div = divs[i];
if (div.getAttribute('align') == 'center') {
div.parentNode.removeChild(div);
}
}
Which will remove every div in the document that has align="center".
Note that the object returned by getElementsByTagName is a NodeList. If you iterate over it from 0 and remove nodes, they are removed from the live list so you will skip the node following the one you remove and you will attempt to access no existant nodes at the end. Going over the list backwards avoids these pitfalls. An alternative is to turn the NodeList into an array, but that's somewhat inefficient.
Edit
Since you edited the question, here's an update answer.
You can get a reference to the TR using getElementById:
var root = document.getElementById('-1');
Now you can go down the DOM:
var cell = root.cells[0]; // First cell in the row
var div = cell.getElementsByTagName('div')[0]; // first div
cell.removeChild(div);
Which is specific to the structure you've posted.
If you can just remove the content, you can use:
var all = document.getElementsByTagName("div");
for(i=0; i < all.length; i++) {
all[i].innerHTML = ""
}
See http://jsfiddle.net/7KVkC/
You need some way to make this div tag unique. There is another javascipt function called getElementsByTagName that you can use to get an array of all of the div tags. You can then use the DOM to check whether that div tag has the property of align="center".

Categories

Resources