0

Edit: I've found 2 questions that have already been asked (much more concisely) that have answers for this question, so this can be locked or deleted.

Including external HTML file to another HTML file [duplicate]

Best practice to create a template in HTML [closed]

I apologize in advance because I'm not sure the proper terminology to search for this answer, I only have intermediate knowledge of HTML and CSS, and I'm only barely familiar with JS. I can't write it yet, but if I need to download a simple library and call up something to do this, that shouldn't be much of a problem.

In this example we assume the HTML files share a directory. The files are the parent section.html, and the children files I'd need to pull contents from: cylinder.html, prism.html, and sphere.html.

This is section.html:

<div class='container'>
    <div class='card'>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit
    </div>

    <div class='card'> 
        <!-- display contents of cylinder.html, prism.html, or sphere.html here --> 
    </div>
</div>

I'm looking for a simple way to insert the contents of one of those three files into the second nested div (third overall) in section.html that would display the contents of whichever of those files I inserted.

For instance, if this is cylinder.html:

<table id='cylinders'>
    <tbody>
        <caption>Cylinders</caption>
        <tr>
            <th>Height</th>
            <th>Circumference</th>
            <th>Weight</th>
        </tr>
        <tr>
            <td>1m</td>
            <td>40cm</td>
            <td>55kg</td>
        </tr>
        <tr>
            <td>1.2m</td>
            <td>50cm</td>
            <td>83kg</td>
        </tr>
    </tbody>
</table>

So that when section.html is read by a browser, it sees this:

<div class='container'>
    <div class='card'>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit
    </div>

    <div class='card'> 
        <table id='cylinders'>
            <tbody>
                <caption>Cylinders</caption>
                <tr>
                    <th>Height</th>
                    <th>Circumference</th>
                    <th>Weight</th>
                </tr>
                <tr>
                    <td>1m</td>
                    <td>40cm</td>
                    <td>55kg</td>
                </tr>
                <tr>
                    <td>1.2m</td>
                    <td>50cm</td>
                    <td>83kg</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

(I don't want to share too much irrelevant information here, but my reasoning for this is that I'm building a simple but large shopify store as a project, and I'd like to have a way to update/modify particular parts of many product descriptions at once without having to go through and edit them one by one. This way I can update cylinder.html down the line if I change the size or measurements of a particular set of products. )

geckswav
  • 1
  • 2
  • Can you add the snippet of one of the child htmls that you are using? Also could you please clarify whether it is conditional, or do you want to display 3 rows under that table, 1 row corresponding to 1 html? – user3115056 Oct 16 '19 at 20:52
  • @user3115056 I don't understand what you're asking but I'm going to try answering. `cylinder.html` is just an example. My desired result is having the content of an external HTML file appear in an element the master HTML file. This is something I'd manually add to my product descriptions just to link to an external file, depending on the product type. This way if I need to update all the hammers on my site I can edit an external `hammers-description.html` file. These are all examples. I don't know how to ask which is why I added the examples. – geckswav Oct 16 '19 at 21:31
  • After coming back to this with a fresh head and looking again, I was able to find two relevant questions that have already been answered, so this is a duplicate and should be locked or deleted. [Question 1](https://stackoverflow.com/questions/16132341/best-practice-to-create-a-template-in-html) [Question 2](https://stackoverflow.com/questions/17148357/including-external-html-file-to-another-html-file) – geckswav Oct 17 '19 at 13:05

0 Answers0