Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs

Dashboard
Notifications
Mark all as read
Q&A

How to append HTML to the DOM with JavaScript?

+1
−1

I have a .html file containing only the following data, and I keep that file on top of my website's directory.

<link rel="stylesheet" href="./css/mobile_general_structure.css"></link>

<div dir="rtl" class="main_box">
    <div class="phone_box">
        <a class="phone_link" href="https://wa.me/NUMBER">
	    <img class="phone_icon" src="./images/whatsapp.svg"></img>
	    <span class="phone_text">WhatsApp call</span>
        </a>
    </div>
</div>

I want to append that HTML data in into the DOM, so that the code will effect my website.
I can paste that data inside a PHP template file of my content management system but I prefer not to touch such files because otherwise I would have to edit any such edited file each time I upgrade the content management system; in contrast, I do have full comfortable control over the JavaScript.

Why does this post require moderator attention?
You might want to add some details to your flag.
Why should this post be closed?

1 comment thread

always try to use full form (2 comments)

2 answers

+0
−0

Use fetch() to request the HTML file from the server. Call .text() on the Response object you get from the fetch in order to get the HTML contents as a string. You can then insert the string into a DOM node with .insertAdjacentHTML() (which is recommended over anything involving .innerHTML for performance reasons).

fetch and text return promises, so make sure you have some familiarity with how those work.

Why does this post require moderator attention?
You might want to add some details to your flag.

0 comment threads

+0
−0

First, I would warn you that using JavaScript here isn't best practice. It won't work for people without JavaScript and it will slow down the site some even for people with JavaScript. If you can do it server-side, that would be better for the users.

That said, if you do want to do it with JavaScript, the best way would be to use insertAdjacentHTML().

To append the code snippets to the end of head and then the body:

const headerCode = '<link rel="stylesheet" href="./css/mobile_general_structure.css"></link>';
const bodyCode =
`<div dir="rtl" class="main_box">
    <div class="phone_box">
        <a class="phone_link" href="https://wa.me/NUMBER">
	    <img class="phone_icon" src="./images/whatsapp.svg"></img>
	    <span class="phone_text">WhatsApp call</span>
        </a>
    </div>
</div>`;

document.head.insertAdjacentHTML('beforeend', headerCode);
document.body.insertAdjacentHTML('beforeend', bodyCode);

Embedding the HTML into the JS eliminates the need for a separate server call. Using a template literal lets you put easily put line breaks in the code.

Why does this post require moderator attention?
You might want to add some details to your flag.

0 comment threads

Sign up to answer this question »