0

Seguinte estou mexendo no moodle e 90% do html dele é gerado via backend, preciso mudar um <h1 id='courseheader')>Title</h1> de lugar via javascript ja que não tenho acesso a esse elemento, a ideia era retirá-lo de onde está para jogá-lo dentro de um container que tenho na mesma pagina.

Qual função javascript/JQuery posso usar para isso?

Procurei no google mas não consegui expressar a dúvida de uma forma tão clara que pudesse me retornar respostas.

Espero que aqui esteja claro a dúvida, qualquer coisa edito. Obrigado.

Exemplo:

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

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

Obs.: Eu até poderia criar um h1 novo dentro do container via JS mas gostaria de aproveitar o que já tem.

Obs2.: Esqueci de mencionar, que eu quero que esse h1se junto aos outros elementos dentro do container e que ele se mantenha dentro da tag h1...

3
  • Um pouco pedante mas é interessante notar que o que você quer é mudar de lugar um elemento DOM . Commented 10/03/2016 às 13:44
  • você quer uma solução usando jquery ou vanilla JS? Commented 10/03/2016 às 13:45
  • Na vdd gostaria de saber a função, usando jquery. Acho até uma pergunta meio 'besta' mas so precisava saber qual função usar ... @CaioFelipePereira
    – user27585
    Commented 10/03/2016 às 13:46

2 Respostas 2

1

Você pode utilizar o código abaixo como exemplo, ele:

  1. Captura o elemento h1 desejado através do ID
  2. Captura o elemento container através do className
  3. Adiciona ao textContent do container um novo elemento clone de h1 através do método cloneNode(true)

Nota: Para que não houvesse quebra de linha no container, foi necessário adicionar a propriedade 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>

5
  • Dei uma editada na minha pergunta acho que esqueci de mencionar que preciso que o h1 se mantenha dentro do container e que não apague os demais elementos que lá existe e sim se junte a eles.
    – user27585
    Commented 10/03/2016 às 14:06
  • @Erick Resposta atualizada
    – Vinícius
    Commented 10/03/2016 às 14:08
  • 1
    +1 por usar JS puro Commented 10/03/2016 às 14:10
  • Legal to mexendo aqui para colocar ele no topo =D ... Mas obrigado aos dois que ajudaram, era isso ai que eu queria mesmo... vlwww
    – user27585
    Commented 10/03/2016 às 14:24
  • 1
    A ultima linha do codigo coloquei containerElement.insertBefore(h1Element.cloneNode(true) , containerElement.firstChild); e o elemento ficou em primeiro lugar =D
    – user27585
    Commented 10/03/2016 às 14:37
1

Usando jQuery, você tem várias maneiras de fazer isso. Não sei se é a mais performática ou a mais elegante, mas resolve o problema. Veja:

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>

O setTimeout é uma perfumaria, apenas pra você ver funcionando.

EDIT

Eu propositalmente apaguei o conteúdo da div porque achei que era isso que você queria. Editei o código pra ficar de acordo com o seu comentário

5
  • 1
    Legal, e mais ou menos isso ai que eu quero, na vdd ele não poderia apagar o conteúdo que esta dentro da div e sim apenas se juntar aos outros elementos, mas vc ja deu o caminho, vou mexer no código para ver se consigo resolver ... Obrigado Caio.
    – user27585
    Commented 10/03/2016 às 14:01
  • Veja a resposta editada Commented 10/03/2016 às 14:10
  • Cara so uma duvida besta, o que vc mudou no codigo mesmo para não apagar o conteudo que estava na div container?
    – user27585
    Commented 10/03/2016 às 15:45
  • 1
    Mudei de _container.html('').append(_h1); para _container.append(' ' + _h1); Commented 10/03/2016 às 17:38
  • haha vlw onbrigado
    – user27585
    Commented 10/03/2016 às 17:40

Você deve fazer log-in para responder a esta pergunta.