Guidelines for placing an HTML element in relation to another HTML element using CSS or JavaScript

Question

Guidelines for placing an HTML element in relation to another HTML element using CSS or JavaScript

Is there a way to position an HTML element in relation to another using CSS or JavaScript? I have attempted to copy the inner HTML of the "second-element" and append it inside the "first-element", but this approach is causing issues with other functionalities. I am looking for a CSS or JS solution that does not require altering the HTML structure.

<body>
<div id=“first-element”>
    <p>— Choose course —</p>
    <!— The second-element should appear here —>
</div>

<div id=“second-element”> 
    <ul>
        <li>Maths<li>
        <li>Science</li>
    </ul>
</div>
</body>

javascript html css position css-position

Answer 1

Answer №1

<div id="primary-section">
  <p>— Pick a course —</p>
</div>
<div id="secondary-section">
  <ul>
    <li>English</li>
    <li>History</li>
  </ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script>
$(document).ready(function() {
$('#secondary-section ul').appendTo('#primary-section');
});

</script>

Answer 2

<div id="primary-section">
  <p>— Pick a course —</p>
</div>
<div id="secondary-section">
  <ul>
    <li>English</li>
    <li>History</li>
  </ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script>
$(document).ready(function() {
$('#secondary-section ul').appendTo('#primary-section');
});

</script>

Guidelines for placing an HTML element in relation to another HTML element using CSS or JavaScript

Answer №1

Similar questions

"Implementing a monorepo with turborepo for seamless deployment on Vercel: A step-by-step

iOS device encounters failure with Ajax CORS request and redirect

Looking for assistance with PHP and JavaScript integration

Slide your finger upwards to shut down the mobile navbar in bootstrap

Using Vue to dynamically wrap a component with a tag

Ways to dynamically assign a class to a single element within a group of identical elements

NodeJS: Steps to efficiently transfer data from a master table to two separate tables while maintaining the order of the master table, utilizing asynchronous code wherever applicable

What is the process for adjusting the color of the underline in Material UI input fields

What are the best ways to position elements within a div?

Vue.js does not have the ability to toggle a font-awesome icon

The NW JS window loaded event fails to trigger when loading a URL, but functions properly when loading from a local

Using AngularJS to show content based on a callback function

Combining Flask with Ajax: AttributeError - WSGIRequestHandler does not have the attribute 'environ'

Styling triangles within a CSS triangle

The functionality of jQuery binding is not functioning properly

Setting the height of columns in a Bootstrap panel to 100%

Fill a JavaScript array with values inserted in the middle position

Here's a helpful guide on verifying the presence of a value within an array in Quasar

Right-align each item when selecting none

Is there a way to create a function that can show the pathway on the Browser Console?