Issue with adding child elements within a loop

I need assistance with appending an existing div (stored in the variable "parent") to a new div multiple times within my code. Below is the snippet of code I am working with. Currently, it appends the existing div to the last created div. Can someone help me resolve this issue?

var result = JSON.parse(xhr.responseText);
var rowCount = result.length;
var parent = document.getElementById("post-feed");
for(i = 0; i < rowCount; i++){
    var newdiv = document.createElement("div");
    newdiv.id = "post-id-"+result[i].postid;
    newdiv.className = "row";
    newdiv.appendChild(parent);
    document.getElementById("feed").appendChild(newdiv);
    document.getElementById("post-msg").innerHTML = result[i].message;
    var image = result[i].image;
    if(image != null){
        document.getElementById("image").src = "uploads/"+image;
    }

Answer №1

An individual component cannot exist in more than one location at the same time, therefore if you wish to replicate the structure of a component, you can utilize cloneNode method for duplication.

document.getElementById("content").appendChild(clonedDiv.cloneNode(true));

Answer №2

Seems like there was a mix-up between the child and parent elements in line 8. Perhaps you meant to use parent.appendChild(newDiv); instead.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Exploring the power of Vue.js through dynamic and recursive components

I am struggling with creating a recursive custom component that calls itself. Unfortunately, I keep encountering an error. An unknown custom element: <TestRec> - have you registered the component correctly? For recursive components, ensure to specif ...

What are some of the techniques for customizing the DOM generated by material-ui in ReactJS?

Is there a way to style the dynamically created DOM elements from material-ui? I'm currently using GridListTileBar, which generates a DOM structure like this for its title property. <div class="MuiGridListTileBar-title-29" data-reactid=".0.3.0.$3 ...

When it comes to identifying a click outside of an element, the Jquery or Javascript function may encounter some challenges specifically with Internet Explorer

After reviewing various solutions online, I noticed that they all function properly on Chrome and Firefox but encounter issues with Internet Explorer when interacting with an SVG. For instance, consider the following code snippet: $(document).on("click",( ...

What is the method for selecting the desired month on a primeng calendar with multiple selection enabled?

I am looking for a solution to make my inline primeNg Calendar display the month of a specific date in the model, and when I remove dates from the model, I want it to show the current month. I have tried using defaultDate={{value}} and minDate={{value}}, a ...

AngularJS presents an error: [ng:areq] The argument 'myAppCtrl' is not recognized as a function, as it returns undefined while implementing routes with ngRoute and $routeProvider

Can anyone assist me with an error I'm encountering while setting routes on two buttons? Despite having everything properly defined, the table is not displaying any data. Your insights would be greatly appreciated. Thank you for your help. Snippet f ...

How can a method inside an object property of the same class be invoked in JavaScript?

I'm faced with a bit of confusion here. I have a class property called hotspot of type object, declared as follows: Cannon.prototype.hotspot = {stuff: this.blah(...) }; The method blah() is actually a prototype of the same 'class': Canno ...

Wait until the user submits the form before activating Angular validations, and do not display any validation messages if the user deletes text from a text box

I am looking to implement angular validations that are only triggered after the user clicks on submit. I want the validations to remain hidden if the user removes text from a textbox after submitting it. Here is what I need: - Validations should not be dis ...

What is the best way to adjust a div's height to fill the remaining space of the viewport after the header's height

Is there a way to create a hero section that fills 100vh minus the height of the header, especially when the height of the header is not fixed? I initially used CSS with a height property set to calc(100vh - 310px), where 310px represents the height of t ...

Is it possible to observe cross-domain Javascript requests in Firebug or any alternative browser extension?

Is there a way to monitor cross-domain JavaScript requests made on a webpage? Is it possible with Firebug or any other plugin? Consider this scenario: If I visit stackoverflow.com and they incorporate an external JavaScript file (such as Google Analytics) ...

While attempting to utilize inner class functions in Node JS, an error is being encountered

I've been delving into Node JS and exploring how to implement an OOP structure within node. I've created a simple class where I'm using functions to verify and create users in a database. However, I'm encountering a TypeError when attem ...

When utilizing ng-repeat and invoking the function in the HTML, the JSON array values fail to transfer to the HTML form

What I am trying to achieve: https://i.sstatic.net/hbdbC.jpg I am facing issues with getting the desired dynamic form output. The values are not being displayed and the data is not passing from the JavaScript file to the html form. I have even tried usin ...

Activate event starting from parent and ascending through child nodes

When I have a table inside a <div class="timely"></div>, and within that table is a <th class="prev"><i>previous</i></th>, Chrome developer tools show an event listener on the <th>. However, Firefox developer tools ...

Using setTimeout() in JavaScript to create a delay between functions

Is there a way to add a delay between the execution of each function in my program? Currently, I have the following setup: function function0() { setTimeout(function1, 3000); setTimeout(function2, 3000); setTimeout(function0, 3000); } While t ...

Steps for making a cookie in Node.js using Socket.IO

I'm currently exploring the process of creating a cookie while utilizing socket.io. Although I have successfully figured out how to read cookies, I am struggling to find resources on how to actually create one. socket.on('test', async funct ...

Translate a jQuery ajax request utilizing jQuery().serialize into plain JavaScript

Currently, I've been in the process of converting a jQuery script into vanilla JavaScript to completely eliminate the need for jQuery. The main functionality of the code includes: Upon clicking a button on the front end, an ajax request is sent, upda ...

Breaking down the initial state within a redux reducer

Can you explain the distinction between returning state in the default case of a Redux reducer using return state and return { ...state } ? ...

How to Remove onFocus Warning in React TypeScript with Clear Input Type="number" and Start without a Default Value

Is there a way to either clear an HTML input field of a previous set number when onFocus is triggered or start with an empty field? When salary: null is set in the constructor, a warning appears on page load: Warning: The value prop on input should not ...

Transforming retrieved data into an array using Node.js

Got some data from a URL that looks like this: data=%5B1%2C2%2C3%2C4%2C0%5D which when decoded is [1,2,3,4,0]. Used the snippet below to parse the data: var queryObj = querystring.parse( theUrl.query ); Seems like it's not an array. How can I con ...

Can dynamic CSS imports be unloaded in a React application?

I am facing an issue with loading two files using react.lazy and suspense: import React, { Suspense, lazy } from "react"; import { Route, Redirect } from 'react-router-dom'; const MainLayout = lazy(() => import('Components/Layout/MainL ...

Choose the checkbox by utilizing pre-populated information in Angular 6

I am looking to present a list of roles in checkboxes, where if a role has been previously selected, the checkbox should be pre-checked. Here is the code I am using to return the rolesId: this.Adu.optionId=this.selectedEdit; this.otionService.GetRolesfoO ...