Javascript для загрузки HTML код

Question

body \t { 
 
    background-color: #E6E6E6; 
 
    margin-right: 0px; 
 
    margin-bottom: 0px; 
 
    margin-left: 0px; 
 
    font-family: arial, helvetica, sans-serif; 
 
    font-size: 22px; 
 
    color: #808080; 
 
} 
 
p \t { 
 
    font-size: 22px; 
 
    color: #808080; 
 
} 
 
h1 \t { 
 
    font-size: 32px; 
 
    font-weight: bold; 
 
} 
 
h2 \t { 
 
    font-size: 22px; 
 
    font-weight: bold; 
 
} 
 
h3 \t { 
 
    font-size: 22px; 
 
    font-weight: normal; 
 
    text-decoration: underline; 
 
} 
 
hr \t { 
 
    border: 0; 
 
    border-bottom: 1px dashed #808080; 
 
} 
 

 
a:link \t { 
 
    color: #B2AB19; 
 
    text-decoration: none; 
 
    border: none; 
 
} 
 
a:hover \t { 
 
    color: inherent; 
 
    text-decoration: none; 
 
    border-bottom: 1px solid #B2AB19; 
 
} 
 
a:active \t { 
 
    color: inherent; 
 
    text-decoration: none; 
 
    border: none; 
 
} 
 
a:visited \t { 
 
    color: #B2AB19; 
 
    text-decoration: none; 
 
    border: none; 
 
} 
 
#container { 
 
    width: 90%; 
 
    margin: 0 auto; 
 
    background: #FFFFFF; 
 
} 
 
#nav \t { 
 
    clear: both; 
 
    width: 100%; 
 
    background-color: #EF9898; 
 
    border: 0px; 
 
    margin: 0 auto; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
} 
 
#header \t { 
 
    clear: both; 
 
    width: 100%; 
 
    background-color: #FFFFFF; 
 
    border: 0px; 
 
    margin: 0 auto; 
 
    box-sizing: border-box; 
 
} 
 
#lcolumn \t { 
 
    float: left; 
 
    max-width: 250px; 
 
    border: 0px; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
} 
 
#rcolumn \t { 
 
    position: relative; 
 
    margin-left: 250px; 
 
    border: 0px; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
} 
 
#footer \t { 
 
    clear: both; 
 
    width: 90%; 
 
    background-color: #FFFFFF; 
 
    border: 0px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
}

<script> 
 
    function getheaderHTML() \t { 
 
    var content = ' <div id="nav">' 
 
    +' <a href="index.html">number 1</a>｜<a href="students.html">number 2</a>' 
 
    +' </div>' 
 
    +' <div id="header">' 
 
    +' <img src="header.jpg" alt="testing" width=100% height=260>' 
 
    +' </div>'; 
 
    document.body.innerHTML = content; 
 
    } 
 
    function getfooterHTML() \t { 
 
    var content = ' <div id="footer">' 
 
    +' &#169;2016' 
 
    +' </div>' 
 
    document.body.innerHTML = content; 
 
    } 
 
</script> 
 

 
<div id="container"> 
 
    <script> 
 
    getheaderHTML(); 
 
    </script> 
 
    <div id="lcolumn"> 
 
    <p>hello</p> 
 
    </div> 
 
    <div id="rcolumn"> 
 
    <h1>Title</h1> 
 
    <p>hello</p> 
 
    </div> 
 
    <script language="JavaScript"> 
 
    getfooterHTML(); 
 
    </script> 
 
</div>

Я хотел бы использовать JavaScript, чтобы избежать повторного кода форматирования расположение нескольких веб-страниц, так что, когда я изменить расположение, мне нужно будет только изменить содержимое одного файла. Мне сказали, что document.write не является хорошей идеей сделать это, и член был достаточно любезен, чтобы предложить вышеуказанный код javascript. Однако он не загружает желаемый результат. Могли бы вы, пожалуйста, посоветовать? Огромное спасибо.

Answer 1

Я рекомендую вам использовать какой-либо шаблонный движок, например Pug. С помощью мопса вы можете легко использовать код и сделать свой код более читабельным и организованным. Надеюсь, мой совет работает.