将HTML / JavaScript代码分开

Question

I don't know what term for this is but it's like with PHP when you use 'includes' or when you store HTML in a variable and call it to print at a certain point in a HTML page.

I want to better organize and tidy up my html page which to me is so cluttered I'm getting brain fog just navigating my way around my code. I don't have a web server everything is running client side javascript. It's actually a HTA application.

I want for example to call a table that I've kept in a separate .html file into the Main html file.

so for example:

//main html file
<table>
<tr>
   <td>"call external html file here"</td>
</tr>
</table>

or if there is a way with jquery or javascript to store chunks of html code into a variable then call it to print in main html, although I don't know if this will take up too much resources. What are my options?

Thanks!

Answer 1

To load external HTML, use JQuery .load() : http://api.jquery.com/load/

Example:

$('#result').load('ajax/test.html');

You can also separate your javascript into another file:

<script src="yourjavascript_file.js" type="text/javascript"></script>

Answer 2

You can use the jQuery load function:

HTML:

<table>
    <tr>
        <td id="load"></td>
    </tr>
</table>

jQuery:

$("#load").load("http://link.to/file");

Answer 3

对于初学者来说，另一个选项可能是模板化： http : //api.jquery.com/category/plugins/templates/

Answer 4

In the main html file, you can use code such as

next.body()

Then, in the file you want to call, you can use code such as

inherit file="base.html"

to call the main file.

But it all depends which framework you are using

Answer 5

除了上面的答案外， load函数还为您提供了极大的灵活性，不仅可以插入HTML块，还可以通过在链接到HTML文件后添加以空格分隔的选择器表达式来仅插入该块中的选择部分。 ：

$("#tobefilled").load("foo.html #onlythiselement",function() {});