How to insert html elements

Question

I'm trying to insert the whole element into the container element however It throws some object into the DOM

JS:

const CONTAINER = document.getElementById('container');
let title = document.querySelector('h1').cloneNode(true);
CONTAINER.insertAdjacentHTML('beforeend', title);

HTML:

<div class="container" id="container"></div>
<h1>Test</h1>

That's because you used insertAdjacentHTML, but title is not a string value containing HTML code, it is an HTMLElementObject. Use appendChild instead. — C3roe
– C3roe, Commented Jun 17, 2022 at 11:47

Carsten Massmann · Accepted Answer · 2022-06-17 11:55:52Z

2

Or, as a one-liner:

document.getElementById('container').insertAdjacentHTML('beforeend', document.querySelector('h1').outerHTML);

<div class="container" id="container">This is the target container</div>
<p>Some padding text</p>
<h1>Test</h1>

answered Jun 17, 2022 at 11:55

Carsten Massmann

28.4k3 gold badges25 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

X3R0 · Accepted Answer · 2022-06-17 11:48:47Z

1

title it is an HTMLElementObject. Use appendChild instead.

const CONTAINER = document.getElementById('container');
let title = document.querySelector('h1').cloneNode(true);
CONTAINER.appendChild(title);

<div class="container" id="container"></div>
<h1>Test</h1>

answered Jun 17, 2022 at 11:48

X3R0

6,4152 gold badges19 silver badges45 bronze badges

Collectives™ on Stack Overflow

How to insert html elements

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related