What javascript function do I use to extract an HTML block from one place and insert it into another on the same page

Question

Next I’m touching the moodle and 90% of its html is generated via backend, I need to change a <h1 id='courseheader')>Title</h1> from place via javascript since I do not have access to this element, the idea was to remove it from where it is to throw it into a container I have on the same page.

What javascript/Jquery function can I use for this?

I googled but could not express doubt so clearly that could return me answers.

I hope here is clear doubt, anything edits. Thank you.

Example:

<h1 id='courseheader')>Title</h1>

<div class="container"> Quero retirar o h1 ali de cima e colocá-lo aqui dentro</div>

Note: I could even create a new H1 inside the container via JS but I would like to take advantage of what already has.

Obs2.: I forgot to mention, I want that h1together with the other elements inside the container and that it stays inside the tag h1...

Answer 1

Using jQuery, you have several ways to do this. I don’t know if it’s the most performative or the most elegant, but it solves the problem. See:

var _h1 = $('#courseheader').html();

var _container = $('.container');

setTimeout(function(){
  _container.append(' ' + _h1);  
}, 2000);
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1 id='courseheader'>Title</h1>

<div class="container"> Quero retirar o h1 ali de cima e colocá-lo aqui dentro</div>

The setTimeout is a perfumery, just for you to see working.

EDIT

I purposely erased the contents of div because I thought that’s what you wanted. I edited the code to conform to your comment

Answer 2

You can use the code below as an example, it:

1. Captures the element h1 desired through the ID
2. Captures the element container through the className
3. Adds to the textContent container a new clone element of h1 through the method cloneNode(true)

Note: In order to avoid line breaking in the container, it was necessary to add the property display: inline;

//Recuperando elemento H1 
var h1Element = document.getElementById("courseheader");

//Recuperando elemento container
var containerElement = document.getElementsByClassName('container')[0];

//Adicionando conteúdo do h1 ao container
containerElement.appendChild(h1Element.cloneNode(true));

h1{
  display: inline;
 }

<h1 id='courseheader'>Title</h1>

<div class="container"> Quero retirar o h1 ali de cima e colocá-lo aqui dentro</div>