2016-06-23 15 views
2

私はhtmlとcssに堪能だと思っています。私はウェブ開発の世界で私の視野を広げることを計画しています。基本的なhtml/css、さらにはjavascript/phpを使ってクラスを持つdiv用のテンプレートを作成する方法はありますか?潜在的なJavaScript/PHPクエリ

たとえば、 "test"クラスで作成されたdivタグには、次のようにプリセット要素があります。それは、正しく応答しなかった提案jQueryのコードを使用してJavaScriptに...

を更新しました

<div class="test"> 
<h1></h1><br /> 
<p></p> 
</div> 

<!doctype html> 
    <html> 

    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
     <script>$(".test").html("<h1>TEST</h1><br /><p>TEST</p>");</script> 
    </head> 

    <body> 

    <div class="test"></div> 

    </body> 
    </html> 
+1

私はあなたがJava ** Script **を意味すると信じています。 Javaはウェブ上で頻繁に使用されることはありません。あなたは、jQueryのをJavaScriptライブラリを使用する場合は – NoOneIsHere

+0

、それは同じくらい簡単です: '$( "#1")HTML( "


");' – NoOneIsHere

+2

@NoOneIsHere実は、彼は、Javaの話をすることができます。 PHPとJavaは本質的に機能は同等ですが、それほど普及していません。 – Randy

答えて

0

<script>という特殊タグを使用してHTMLでこれを行うことができます。 <script>は基本的にブラウザにテキストを表示しないように指示し、代わりにJavaScriptとして実行します。 JavaScript構文の詳細については、Wikipediaをご覧ください。 jQueryというオープンソースライブラリを使用すると、JavaScriptコードを短くすることができます。 jQueryのを使用するには、(好ましくは<head>で)HTMLドキュメントに

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 

を含める必要があります。あなたが尋ね行うには、あなただけのjQueryの$(別<script>中)を使用する必要があります。

$(".test").html("<h1></h1><br /> 
       <p></p>"); 

これはありませんが、それは($)すべての要素のクラス(.)テストを選択し、その内部HTMLを設定しています(内部のHTML)を指定されたコードに変換します。 <div>を変更することがありようにスクリプトが第二行かなければならない

<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
</head> 
<body> 
    <div class="test"> </div> 
    <script> 
     $(".test").html("<h1></h1><br /><p></p>"); 
    </script> 
</body> 

:あなたの頭は今のようになります。

+0

私はあなたのスクリプトをtest.htmlページに適用しましたが、何らかの理由でそれを動作させることができません。上記の例を適切に編集しました。 – nathzOO

+0

@nathzOO私は自分の答えを編集しました。 – NoOneIsHere

0

本当に何をしたいかによって異なります。 "テンプレート"は一般にJSやPHPのものではありませんが、ライブラリなどを使用してこれらを使用することができます。

広く使用されているPHPライブラリの1つは、Smartyです。これは、「テンプレートエンジン」です。 JSについても、ReactJSAngularJSのような類似のものが見つかります。私はいくつかの周りを見て、あなたのために最適なものを見ることをお勧めします。

関連する問題