Welcome to Software Development on Codidact!
Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.
How to append HTML to the DOM with JavaScript?
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.
2 answers
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.
0 comment threads
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.
0 comment threads
1 comment thread