Append child in DOM table - javascript

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

Related

JQuery append method multiple parent elements append same element

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)

<br> not being appended to div

ogres = document.getElementById('${contentID}')
.
let prettify = streamArray[streamArray.length - 1].split(/--/),
layers = document.createTextNode(prettify[0]),
onions = document.createTextNode(prettify[1]),
breaking = document.createElement('br');
I have an array of two elements that I've created called prettify.
I have definitely confirmed that the prettify[0] and prettify[1] are the elements I want so I make them into onions and layers which are text nodes to be appended to the div.
You'll note I also have breaking which is a break element I create and also append to the div.
I then have the div, orges.
Now for some unknown reason when I do this:
ogres.appendChild(layers);
ogres.appendChild(breaking);
ogres.appendChild(onions);
ogres.appendChild(breaking);
on the html page, this is created:
layersonions
<br>
1: why is this happening
2: how do I fix it?
3: no I don't plan on keeping these variable names, but they are fun :3
When you use document.createElement('br'); to create an element, it is appended as the second node of the parent.
Since you are using the same reference again, it simply detaches the existing element and appends it again in the new position.
It is a single reference to the element. To fix it you will have to create and append an element on the fly.
ogres.appendChild(layers);
ogres.appendChild(document.createElement('br'));
ogres.appendChild(onions);
ogres.appendChild(document.createElement('br'));
appendChild
If you still want to use the variable reference then you could use the cloneNode method which will clone the existing node before insertion.
ogres.appendChild(layers);
ogres.appendChild(breaking);
ogres.appendChild(onions);
ogres.appendChild(breaking.cloneNode(false));
cloneNode

jQuery insert child into element at set index

I would like to use jQuery to insert an html element inside another element and at a particular position.
I've found a way I can do it in Javascript but was wondering if there's a shorter 'one line of code' way of doing it in jQuery.
var container = document.getElementById("container");
container.insertBefore( html, container.children[0] );
Many thanks in advance
Use the selector for the n-th child of a given kind and the before method (assuming your new content comes in html) :
$("#container > div:nth-of-type(42)").before(html);
If you want to insert a new element as the first or last child of a container, there is another api option:
$("#container").append( html );
$("#container").prepend( html );
(For the sake of completeness, append / prepend are the links into the jQuery API docs)
If you want to add an element inside an other with jquery, you have to do like this :
$('#container').append(html);

Referencing the Closest Table Element Near the Image HTML Element

I am trying to get access to the nearest table element from the Image HTML Element. I used siblings but it returns multiple tables since there are other tables at the same DOM level. I can access it using $(this).next().next() syntax but I do not want to do that.
Here is the screenshot. I am trying to access
This jQuery statement will do the trick:
$("img").nextUntil("table").last().next();
You can just keep iterating nextElementSibling until you find a table element:
// `img` is a reference to the image element
var table = img;
while(
(table = table.nextElementSibling)
&& table.tagName.toLowerCase() != 'table'
);
// Use `table` here. It will be `null` if no table is found

Javascript add node

So I have a function like such:
var elem = document.createElement( 'svg' );
elem.id = 'svg1';
and I would like to, in a later function, be able to grab this element via document.getElementById('svg1').
I have found this does not work, and through some research, aka google, found that adding an element this way does not actually add it to the 'node tree'. How can I create an element so I can later reference the Id?
You need to add it to the DOM. For example, to add it as a child of an element with an ID "parent":
document.getElementById("parent").appendChild(elem);
To add an element to the DOM you do this:
document.body.appendChild(elem);
That adds the object to the BODY. If you want to add the node to another node, you replace body with getElementById("id").

Categories

Resources