"Creating a duplicate of an element by utilizing the `next`

I have a dilemma involving two divs within a section of my project - one div is dynamically created while the other exists statically. My goal is to transfer the non-dynamically created div into the one that is generated dynamically.

let adContainer = $('#adContainer').html();
adContainer.next().html(adContainer);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="adContainer">
</div>

<div style="width:100%; height:100%">
   <video></video>
</div>

This approach doesn't seem to be effective. Can you identify what's causing this issue?

javascripthtmljquery

Answer №1

To achieve this task, utilize the clone() and appendTo() functions from jQuery library:

$('#banner').clone().appendTo($('#banner').next());

Explore further at: https://api.jquery.com/clone/

Remember to call next() directly on the element itself, not on its html() content.

Answer №2

The reason your code is not working is that you are trying to use next() with html instead of div. To fix this, you need to select the div and html elements as separate variables like this:

let div =$('#adContainer');
let adContainer = div.html();
div.next().html(adContainer);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="adContainer">
<p>hello</p>
</div>

<div style="width:100%; height:100%">
   <video></video>
</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

In internet explorer with AJAX, the UI is refreshed by Javascript only when an alert() function is triggered

Having an issue in Internet Explorer, works perfectly in Firefox. There is a javascript function that updates the UI (screen content) before an AJAX call. However, it does not update the UI unless an alert box prompt is used. Without the alert box, the UI ...

javascriptajaxinternet-exploreruser-interface

The filtering feature in AngularJS ng-options is not functioning correctly

Greetings, I am a newcomer to angular. In my current demo application, I have created a list of users with a select filter using ng-option. There seems to be a bug that I have been unable to identify. The issue: When I select the Female option, i ...

javascriptangularjsng-options

The functionality of the CSS transform property seems to be malfunctioning

My HTML and CSS code displays texts in two blocks within a dl element. I attempted to change the ▶ symbol to a different shape using the css transform scale property. However, some browsers only show the triangle in the first column. Why is this happenin ...

htmlcss

Weapons of Mass Destruction - receive markdown content

My application is utilizing a markdown editor from Google Code. $(document).ready(function () { var converter = Markdown.getSanitizingConverter(); var editor = new Markdown.Editor(converter); editor.run(); }); <div class="wmd-panel"> ...

javascriptjquerymarkdownwmdwmd-editor

What distinguishes running rm -rf node_modules + npm i from using npm ci?

When using a Unix system and needing to clean out the node modules folder, is there any benefit or distinction between executing rm -rf node_modules followed by npm i as opposed to npm ci My understanding is that both yield the same outcome, but is th ...

javascriptnode.jsnpm

Tips for correctly loading all elements on an HTML page before making CSS modifications

This question has been asked several times in the past. I am asking because when I used the on ready callback in jQuery, it did not change the placeholder text of my element "search_input". $( document ).ready(function() { $("#search_input").attr(' ...

javascriptjquerycssesriarcgis-js-api

Getting URL parameters in NextJS when using Custom Document can be achieved by accessing the `ctx`

Currently, I am utilizing NextJS for generating SSR pages that are language-specific. I want to specify the lang property to indicate the language of the text. Here's what I have done so far: import Document, { Html, Head, Main, NextScript } from &qu ...

javascriptreactjsnext.jsinternationalization

Information released by JavaScript through AJAX and JSON

Hello everyone, I've been trying to merge two different Ajax codes together and it's been quite a challenge. As a novice, I know I may sound ridiculous but I really need some help... My goal is to convert an array into JSON and display the data ...

javascriptjqueryjsonajax

Are all users unable to access jQuery lib in Sharepoint 2013 Permissions?

On my website, I rely on using jquery and custom scripts that are stored in Site Assets. As a member of the "Designer" and "Owner" groups, everything functions smoothly for me. However, regular users encounter errors such as "$" is undefined. Could it be ...

jquerysharepointpermissions

Dynamic Bootstrap Table with Fixed Header

I am customizing a Bootstrap table by adding CSS for a sticky header. My code snippet includes the following: .table-sticky th { background: #fff; position: sticky; top: -1px; z-index: 990; } <div class ...

htmlcsstwitter-bootstrapbootstrap-4

Applying Bootstrap Style to an Inline Select Element: A Step-by-Step Guide

Currently working on a page layout using Thymeleaf and Bootstrap 5. I have divided the page into two parts, with this section behaving as desired: <main role="main" class="pb-3"> <br> <p>Post office ex ...

htmlcssthymeleafbootstrap-5

Performing three consecutive Ajax requests in a Rails application

Recently, I developed a custom admin system for a local gym to manage payments, attendance, mailing, sales, and more. While everything is functioning smoothly, there seems to be an issue with the attendance feature. Occasionally, when taking attendance, an ...

javascriptjqueryruby-on-railsajax

Issues with sending empty strings to an API in Vue Js

My code below is designed to update data using a Node Js REST API. The remaining field contains an equation using v-model=remaininginst to calculate and store the result in remaininginst. However, when I check the console.log, I am getting NaN empty data s ...

javascriptvue.js

Obtaining Relative Values within Every Iteration using jQuery

I'm currently facing an issue with retrieving relative values within a .each() loop using jQuery. I have a set of table rows that contain a text input and a radio button each. My objective is to iterate through each row and save the value of the text ...

javascriptjqueryloopsforeach

Encountering the error code 'ERR_EMPTY_RESPONSE' while utilizing an AJAX-powered live search feature

My website features a live AJAX search bar that retrieves records from a MySQL database. However, when users repeatedly conduct searches by modifying the search criteria, some web browsers display an error message stating 'ERR_EMPTY_RESPONSE'. ...

javascriptphpjqueryajax

Creating a 3-column div with varying sizes of text in another div at the center position

I am attempting to create a 3-column layout using only DIVs, but I am facing some challenges. If I were to use tables in the traditional HTML 4 way, I could achieve this: <div style="width:100%"> <table width="50%" align="center"> ...

htmlcssinternet-explorer-7centering

Completing the pledge using ionic/ui-routing

I've encountered an issue with my promise not resolving as expected while using Ionic/ui-routing. This is the structure of my service: return { all: function () { $localForage.getItem('foo').then(function (bar) { re ...

javascriptangularjspromiseionic-frameworkangular-ui-router

Troubleshooting Routing Issues in a Next.js Website Tutorial

After going through the next.js tutorial at https://github.com/zeit/next-learn-demo.git, I encountered an issue starting from stage 3 "dynamic routing". Despite the tutorial indicating that dynamic routing should be working from stages 3 to 8, it wasn&apos ...

javascriptreactjsnext.js

What are the steps to implement localStorage in Vuejs3?

I'm feeling a bit lost when it comes to localStorage and its usage. I have a component called Statistic.vue which displays a modal at the end. Statistic.vue <template> <p class='modal'>{{numberOfGames}}</p> </template& ...

javascriptvue.jslocal-storagevuejs3

What methods can I employ to restrict access to specific controllers within my MVC3 application?

Currently, I have a dedicated controller for handling AJAX requests in my application. This controller sends and receives JSON data when jQuery makes calls to specific URLs. However, some actions within this controller utilize paid services that I want to ...

jqueryajaxasp.net-mvc-3