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
Community Proposals
Community Proposals
tag:snake search within a tag
answers:0 unanswered questions
user:xxxx search by author id
score:0.5 posts with 0.5+ score
"snake oil" exact phrase
votes:4 posts with 4+ votes
created:<1w created < 1 week ago
post_type:xxxx type of post
Search help
Notifications
Mark all as read See all your notifications »
Users Search
Help Dashboard Sign In Sign Up
Q&A Code Reviews Meta
Q&A
Posts Tags Edits
Ask Question

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.

Post History

57%
+2 −1
Q&A 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> ...

2 answers  ·  posted 3y ago by deleted user  ·  last activity 3y ago by Ullallulloo‭

Question javascript html dom
#10: Post edited by user avatar Alexei‭ · 2021-09-21T08:39:12Z (about 3 years ago)
added relevant tags
javascript
javascript html dom
#9: Post edited by (deleted user) · 2021-09-21T08:02:46Z (about 3 years ago)
  • I keep the following HTML data inside a `.html` file on my website directory:
  • ```html
  • <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.<br>
  • 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.
  • I have a `.html` file containing only the following data, and I keep that file on top of my website's directory.
  • ```html
  • <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.<br>
  • 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.
#8: Post edited by (deleted user) · 2021-09-21T07:56:28Z (about 3 years ago)
  • I keep the following HTML data inside a `.html` file on my website directory:
  • ```html
  • <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.<br>
  • I can paste that data inside a PHP template file of my website but I prefer not to touch CMS template files because otherwise I would have to edit each such template file each time I upgrade the CMS; in contrast, I do have full comfortable control over the JavaScript.
  • I keep the following HTML data inside a `.html` file on my website directory:
  • ```html
  • <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.<br>
  • 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.
#7: Post edited by (deleted user) · 2021-09-20T15:25:40Z (about 3 years ago)
  • Appending HTML to the DOM
  • How to append HTML to the DOM with JavaScript?
  • I keep the following HTML data inside a `.html` file on my website directory:
  • ```html
  • <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.<br>
  • I can paste that data inside a PHP template file of my website but I prefer not to touch CMS template files because otherwise I would have to edit the template file each time I upgrade the CMS; in contrast, I do have full comfortable control over the JavaScript.<br>
  • What is a way to append the file's contents into the DOM with JavaScript?
  • I keep the following HTML data inside a `.html` file on my website directory:
  • ```html
  • <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.<br>
  • I can paste that data inside a PHP template file of my website but I prefer not to touch CMS template files because otherwise I would have to edit each such template file each time I upgrade the CMS; in contrast, I do have full comfortable control over the JavaScript.
#6: Post edited by (deleted user) · 2021-09-20T14:23:56Z (about 3 years ago)
  • I keep the following HTML data inside a `.html` file on my website directory:
  • ```html
  • <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.<br>
  • I can paste that data inside a PHP template file of my website but I prefer not to touch CMS template files because otherwise I would have to edit the file each time I upgrade the CMS; in contrast, I do have full comfortable control over the JavaScript.<br>
  • What is a way to that in JavaScript?
  • I keep the following HTML data inside a `.html` file on my website directory:
  • ```html
  • <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.<br>
  • I can paste that data inside a PHP template file of my website but I prefer not to touch CMS template files because otherwise I would have to edit the template file each time I upgrade the CMS; in contrast, I do have full comfortable control over the JavaScript.<br>
  • What is a way to append the file's contents into the DOM with JavaScript?
#5: Post edited by (deleted user) · 2021-09-20T13:20:14Z (about 3 years ago)
  • I keep the following HTML data inside a `.html` file on my website directory:
  • ```html
  • <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.<br>
  • I can paste that data inside a PHP template file of my website but I prefer not to touch CMS template files because otherwise I would have to edit the file each time I upgrade the CMS; in contrast, I do have full comfortable control over the JavaScript.<br>
  • What might be a way to that in JavaScript?
  • I keep the following HTML data inside a `.html` file on my website directory:
  • ```html
  • <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.<br>
  • I can paste that data inside a PHP template file of my website but I prefer not to touch CMS template files because otherwise I would have to edit the file each time I upgrade the CMS; in contrast, I do have full comfortable control over the JavaScript.<br>
  • What is a way to that in JavaScript?
#4: Post edited by (deleted user) · 2021-09-20T13:19:58Z (about 3 years ago)
  • I keep the following HTML data inside a `.html` file on my website directory:
  • ```html
  • <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.<br>
  • I can paste that data inside a PHP template file of my website (created by the CMS) but I prefer not to touch CMS template files because otherwise I would have to edit them each time I upgrade the CMS; in contrast, I do have full comfortable control over the JavaScript.<br>
  • What might be a way to that in JavaScript?
  • I keep the following HTML data inside a `.html` file on my website directory:
  • ```html
  • <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.<br>
  • I can paste that data inside a PHP template file of my website but I prefer not to touch CMS template files because otherwise I would have to edit the file each time I upgrade the CMS; in contrast, I do have full comfortable control over the JavaScript.<br>
  • What might be a way to that in JavaScript?
#3: Post edited by (deleted user) · 2021-09-20T13:18:11Z (about 3 years ago)
  • I keep the following HTML data inside a `.html` file on, my website directory:
  • ```html
  • <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.<br>
  • I can paste that data inside a PHP template file of my website (created by the CMS) but I prefer not to touch CMS template files because otherwise I would have to edit them each time I upgrade the CMS; in contrast, I do have full comfortable control over the JavaScript.<br>
  • What might be a way to that in JavaScript?
  • I keep the following HTML data inside a `.html` file on my website directory:
  • ```html
  • <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.<br>
  • I can paste that data inside a PHP template file of my website (created by the CMS) but I prefer not to touch CMS template files because otherwise I would have to edit them each time I upgrade the CMS; in contrast, I do have full comfortable control over the JavaScript.<br>
  • What might be a way to that in JavaScript?
#2: Post edited by (deleted user) · 2021-09-20T11:38:35Z (about 3 years ago)
  • I keep the following HTML data inside a `.html` file on, my website directory:
  • ```html
  • <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.<br>
  • I can paste that data inside a PHP template file of my website (created by the CMS) but I prefer not to touch CMS template files because otherwise I would have to edit them each time I upgrade the CMS; in contrast, I do have full comfortable control over the JavaScript.
  • I keep the following HTML data inside a `.html` file on, my website directory:
  • ```html
  • <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.<br>
  • I can paste that data inside a PHP template file of my website (created by the CMS) but I prefer not to touch CMS template files because otherwise I would have to edit them each time I upgrade the CMS; in contrast, I do have full comfortable control over the JavaScript.<br>
  • What might be a way to that in JavaScript?
#1: Initial revision by (deleted user) · 2021-09-20T11:37:31Z (about 3 years ago) 
Appending HTML to the DOM
I keep the following HTML data inside a `.html` file on, my website directory:

```html
<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.<br>
I can paste that data inside a PHP template file of my website (created by the CMS) but I prefer not to touch CMS template files because otherwise I would have to edit them each time I upgrade the CMS; in contrast, I do have full comfortable control over the JavaScript.
javascript