How to insert html in html

How to include an HTML page into another HTML page without frame/iframe?

I want to include an HTML page inside an HTML page. Is it possible?

I don’t want to do it in PHP, I know that in PHP, we can use include for this situation, how can I achieve the same purely in HTML without using the iframe and frame concept?

15 Answers 15

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

You can use an object element

or, on your local server, AJAX can return a string of HTML (responseText) that you can use to document.write a new window, or edit out the head and body tags and add the rest to a div or another block element in the current page.

If you’re just trying to stick in your own HTML from another file, and you consider a Server Side Include to be «pure HTML» (because it kind of looks like an HTML comment and isn’t using something «dirty» like PHP):

If you mean client side then you will have to use JavaScript or frames.
Simple way to start, try jQuery

If you want to use IFrames then start with Wikipedia on IFrames

You could use HTML5 for this:

Update – July 2020: This feature is no longer supported by most major browsers, and is generally considered obsolete. See caniuse.com for the list of browsers which do still support it.

There is no other way to do it in pure HTML. This is what they were built for, it’s like saying I want to fry an egg without an egg.

If you’re willing to use jquery, there is a handy jquery plugin called «inc».

I use it often for website prototyping, where I just want to present the client with static HTML with no backend layer that can be quickly created/edited/improved/re-presented

For example, things like the menu and footer need to be shown on every page, but you dont want to end up with a copy-and-paste-athon

You can include a page fragment as follows

The best which i have got: Include in your js file and for including views you can add in this way

You can say that it is with PHP, but actually it has just one PHP command, all other files are just *.html.

Remark: all commands like will be treated as php executables, so if your html have question marks, then you could have some problems.

Inserting HTML elements with JavaScript

Instead of tediously search for workarounds for each type of attribute and event when using the following syntax:

Is there a way where I can just declare the entire HTML element as a string? like:

7 Answers 7

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

Instead of directly messing with innerHTML it might be better to create a fragment and then insert that:

Even though innerHTML is used within the function, it’s all happening outside of the DOM so it’s much faster than you’d think.

position is the position relative to the element you are inserting adjacent to:

‘beforebegin’ Before the element itself

‘afterbegin’ Just inside the element, before its first child

‘beforeend’ Just inside the element, after its last child

‘afterend’ After the element itself

In old school JavaScript, you could do this:

In response to your comment:

[. ] I was interested in declaring the source of a new element’s attributes and events, not the innerHTML of an element.

I’ll rewrite the abovementioned example to clarify this:

Using a JavaScript framework would make this code much less verbose and improve readability. For example, jQuery allows you to do the following:

Inserting HTML into a div

I am trying to insert a chunk of HTML into a div. I want to see if plain JavaScript way is faster than using jQuery. Unfortunately, I forgot how to do it the ‘old’ way. 😛

what am i doing wrong here guys?

edit:
Someone asked which is faster, jquery or plain js so i wrote up a test:
https://jsben.ch/FBQYM

plain js is 10% faster

6 Answers 6

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

I think this is what you want:

Keep in mind that innerHTML is not accessible for all types of tags when using IE. (table elements for example)

Using JQuery would take care of that browser inconsistency. With the jquery library included in your project simply write:

You may also consider using:

This will add your gallery as the last item in the selected div. Or:

This will add it as the first item in the selected div.

See the JQuery docs for these functions:

I using «+» (plus) to insert div to html :

SUMMARY

More info about why innerHTML = is much faster than innerHTML += is here. You can perform test on your machine/browser HERE

How to insert elements into html document from string?

I have a string of html code stored in the localStorage, and what I want is to convert that string into a document and add that doc to an existing page. So far I came up with:

but in the page the document fragment is just a simple string.

I currently have the html:

The string I saved for test purpose to the localStorage was

The result I am trying to get:

The result I get:

3 Answers 3

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

You can also use the innerHTML property of an existing element if you want to completely remove that element’s current contents and replace them with what’s defined in the HTML string:

Or just append it as raw text using createTextNode :

There’s lots more to explore on MDN.

In the comments we’ve figured out that the text in local storage has already been HTML-encoded, like this:

Testing one two three

That means that whatever code put the text in local storage encoded it before doing that (because local storage doesn’t do that; it faithfully stores and returns the exact string you give it). The best solution is probably to update that code so that it doesn’t do that.

How do i insert a html file into another html file

5 Contributors 6 Replies 22K Views 2 Days Discussion Span Latest Post 7 Years Ago Latest Post by samson.oba.77

The best way is server side using either php or asp.net or any other server side language.
If server side is not an option for you than sticking with your iframe you can hide bars like this in css:

iframe[seamless] <
border: none;>
Remember though that iframes have many, many …

You could also use the object element to include HTML content.

W3C even recommends this over an iframe:
‘ data-bs-template=’

All 6 Replies

The best way is server side using either php or asp.net or any other server side language.
If server side is not an option for you than sticking with your iframe you can hide bars like this in css:

iframe[seamless] <
border: none;>
Remember though that iframes have many, many disandvantages.
Another way can ve JavaScript. You can see some hints here:
‘ data-bs-template=’

You could also use the object element to include HTML content.

W3C even recommends this over an iframe:
‘ data-bs-template=’

You can do with two option, pure HTML or javascript/jquery:
for example, you have a file «footer.html» to be included in index.html

inside tag (or, where you want to include the file (footer.html)), place this:

UPDATED from my answer:

Do not forget to place this following link inside your tag.
Ex: