Show H1 somwhere else on the page again without typing it manually (as a kind of variable)?-CodePudding

I am searching for a way to display an H1 somwhere else on the page again with just HTML or JavaScript.

What I mean: I do have a H1-title which is typed in manually. And I want it automatically be displayed at the bottom on the page again, without having to type it in manually again. (The thing with the bottom on the page is just an example, my project is a bit more complex).

I'm searching kind of a variable, I think.

Thanks in advance for your help.

CodePudding user response：

 x = document.getElementById("title").innerHTML ;
document.getElementById("reap").innerHTML = x;

 <h1 id="title">Your manually written title</h1>

<h1 id="reap">Where You want to show it again</h1>

you can do this with the help of the backend or just create an id for H1 eg...

<h1 id="title">Your manually written title</h1>

<h1 id="reap">Where You want to show it again</h1>

just select with

x = document.getElementById("title").innerHTML ;
document.getElementById("reap").innerHTML = x;

Just create a variable with query selector

CodePudding user response：

Consider you have a heading element. First you need to select the heading then create its clone using the cloneNode() function, it accepts a deep parameter which basically means the node and its whole subtree, including text that may be in child Text nodes, is also copied. After that we basically append the cloned element to the document body.

// select the heading
let el = document.querySelector('.heading');

// clone the element
let clone_el = el.cloneNode( true );


// append it to the body
document.body.append(clone_el);

<h1 >This is a heading</h1>