Implementing embedded divs within other divs for all elements sharing the same class

How can I insert or wrap my second div into a new div container with the same class name? I attempted to do this but it didn't work. Can you help me identify what is missing?

<div class="section" id="section1">
  <div id="myDIV"> --> I want to wrap this into a new div
   asdasd
  </div>
</div>

<div class="section" id="section1">
 <div id="myDIV">
  cbcvbcvb
 </div>
</div>

<script>
//org_html = document.getElementById("section1").innerHTML;
//new_html = "<div class='mydiv-container'>" + org_html + "</div>";
//document.getElementById("section1").innerHTML = new_html;

const parentObject = document.getElementById('section1').innerHTML;

[...parentObject].forEach((parent, i) => {
  //const childElement = document.createElement('div');
  const childElement = "<div class='slidesInner'>" + parentObject + </div>";
  document.getElementById("section1").innerHTML = childElement;

});
</script>

Here is the desired result:

 <div class="section" id="section1">
  <div class="mydiv-container">
   <div id="myDIV">
    cbcvbcvb
   </div>
  </div>
</div>

<div class="section" id="section1">
 <div class="mydiv-container"> <-- this is not showing in the second section
  <div id="myDIV">
   cbcvbcvb
  </div>
 </div>
</div>

Answer №1

There is a mistake in the code snippet:

"<div class='slidesInner'>" + parentObject + </div>";
. The closing quote for </div>" is missing an opening quote ".

Furthermore, it is unnecessary to loop through the content of innerHTML. Instead, you can utilize querySelectorAll to obtain the content structured like

<div id="myDIV">asdasd</div>
. Then, use template literals to craft a new wrapper div and set the innerHTML.

const parentObject = document.querySelectorAll('.section');
parentObject.forEach(function(item, index) {
  item.innerHTML = `<div class='slidesInner' id='subSection_${index}'>${item.innerHTML}</div>`;
})
.slidesInner {
  color: green;
}
<div class="section" id="section1">
  <div id="myDIV">
    asdasd
  </div>
</div>

<div class="section" id="section2">
  <div id="myDIV2">
    cbcvbcvb
  </div>
</div>

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

Encountered a 'node:internal/modules/cjs/loader:1146' error while setting up a React application

Encountering these console errors node:internal/modules/cjs/loader:1146 throw err; ^ Error: Module '../../package.json' not found Require stack: - C:\Users\adity\AppData\Roaming\npm\node_modules\npm\li ...

Is CSS being dynamically generated by style?

I have a website that I need help with: The footer on my site is currently black and I want to remove it To fix this issue, I have to adjust the height in this line of code <div style="position: relative; height: 126px;" id="footer-sidebar" class="fo ...

What is the best way to include ajax form fields in the parent page's POST request?

Greetings all! I've been scouring the internet and this site endlessly, but to no avail. Perhaps my question is misguided, but here it is. I have a webpage that triggers an ajax call upon changing the value of a select box. Essentially, it queries a ...

Using Apache Proxy to host Node.js and Wordpress under one "Domain" with distinct paths

Let's delve into the scenario. I currently have a Wordpress website operating on my primary domain, http://www.example.com. The server has .htaccess enabled and I am utilizing Wordpress permalinks for generating neat URLs. In addition to this, I hav ...

Increasing the size of a container without displacing the elements beneath it

There is an element on my webpage that, when hovered over, expands to reveal hidden text. The issue I'm facing is that this expansion causes the content below it to shift position. I attempted to use position:absolute, but it did not have the desired ...

What is the best method to ensure a TALL table header is repeated on every page in Chrome?

First time poster =) I am currently facing an issue while trying to print a long table and have the table header repeat on each page. The problem arises when the height of the <thead> reaches a certain threshold, specifically 242px in Chrome 87.0.42 ...

Troubleshooting a Problem with AngularJS $.ajax

Oops! Looks like there's an issue with the XMLHttpRequest. The URL is returning a preflight error with HTTP status code 404. I encountered this error message. Any thoughts on how to resolve it? var settings = { "async": true, "crossDomain": ...

Tips on dynamically updating the data-bs-slide-to value using Bootstrap 5 and Vue.js 2

I have been working on creating a dynamic carousel and I've almost got it to work. However, I am facing an issue with populating the 'data-bs-slide-to' property in Bootstrap 5 automatically based on a given array. Here is the complete code: ...

Overlapping parameters in Express.js routes can lead to conflicts and unexpected

My website has a route named date where I display all posts from a specific date, for example: /date/26-12-2015 I also added basic pagination to prevent displaying all data at once. For instance, /date/26-12-2015/2 would show the second page of posts. Ho ...

Steps for unloading or replacing a JQuery script when the useragent is identified as IE6

I've encountered a challenge. I created a script using jQuery that causes an input field to shake if the user enters incorrect values: $('#input-name').addClass('input-bad').effect('shake',{ direction: ' ...

Unable to increase font size using CSS

I am struggling with adjusting the size of an h1 element along with other properties, but the only change I see is in the font family. Could it be the Bootstrap grid I am using causing this issue? I am still relatively new to Bootstrap. h1{ font-famil ...

Creating a hierarchical JSON structure to populate a Handlebars template (HTML) for an iterative component, allowing for the display of three levels of interconnected

Currently, I am working on developing a mega menu component that involves three levels of content. Level 1 (L1): This level is displayed horizontally in a traditional navbar. When hovered over, it expands to reveal the mega menu. Level 2 (L2): These item ...

Injecting a full browser-screen DIV into the body of the webpage

Recently, I was tasked with developing a script that could be utilized on any website. As a test, I decided to use the Google search results page. My goal is simple - to have a full-screen semi-transparent div displayed on any site for cookie notification ...

implementing a delay after hovering over a CSS hover effect before activating it

I'm trying to achieve a specific effect using JavaScript or jQuery, but I'm struggling to figure it out. I have created a simple CSS box with a hover effect that changes the color. What I want is for the hover effect to persist for a set amount o ...

Does JSON hijacking play a role with IE versions greater than 10 or Chrome versions greater than 30?

OWASP suggests wrapping json response with an object rather than returning a direct array. For instance: [{"id":5}] Is this vulnerability still relevant? Could it be exploited? After testing in Chrome, IE, and FF, I couldn't find a way to 'h ...

What is the best way to ensure that the background of wrapped text extends precisely to the pixel distance of the text?

Having a simple issue that I believed could easily be solved with modern CSS, but I'm now confused. I was aiming to have the background of a text parent span precisely across the width of its longest text line, evenly spreading on the sides, different ...

The SyntaxError caused by Selenium IDE: JSON.parse encounters an issue with a control character within a string literal

After installing Selenium IDE version 2.9.1, I encountered some errors while trying to use the tool. When starting Selenium IDE and attempting to open recent test cases, an error message was displayed: An unexpected error occurred. Message: TypeError: t ...

There was an issue compiling the file static/css/main.b6d8a2cb.css with the Css Minimizer plugin. An error occurred: TypeError - Unable to modify properties of undefined (setting 'value')

PS C:\Users\Hp\Desktop\web technology\NCT\carrental> npm run build [email protected] build react-scripts build Attempting to generate an optimized production build... Compilation failed. The error message "static/c ...

Using the history.push() method from the Action Creator will update the URL without actually redirecting to a new page

I have a login page component that I've set up to redirect to another page after a successful login. However, even though the URL changes correctly, the page remains on the Login page. First, let me show you how I import the history module to be used ...

"Exploring the Backbone collection object in our browser's developer console

When I log one of my Backbone collections, the object summary shows that the length is 0 and the models array is empty. However, in the dropdown detail, it displays the correct length and model array. When I run console.log(this.collection.models), it re ...