jqueryでHTMLコードを出力する方法-jsチュートリアル-php.cn

jqueryでHTMLコードを出力する方法

coldplay.xixi

リリース： 2020-11-17 15:07:29

オリジナル

3243 人が閲覧しました

Jquery による HTML コードの出力方法: 1. label 要素を直接出力します。コードは [var form1 = "
"] です。 ; 2 、変数を含む出力ラベル要素、コードは [var country =....] です。

jqueryでHTMLコードを出力する方法

jquery が HTML コードを出力する方法:

フォーム 1: タグ要素を直接出力する

1. エスケープ記号を使用します

var form1 = "<form id=\"myform\" method=\"post\" >"
+"<input type=\"text\" name=\"uname\"  style=\"height:20px;width:100%;\" />"
+"<input type=\"password\" name=\"pwd\" style=\"height:20px;width:100%;\" />"
+"</form>";

ログイン後にコピー

2. 一重引用符を使用します

var form2  = &#39;<form id="myform" method="post" >&#39;
+&#39;<input type="text" name="uname"  style="height:20px;width:100%;" />&#39;
+&#39;<input type="password" name="pwd" style="height:20px;width:100%;" />&#39;
+&#39;</form>&#39;;

ログイン後にコピー

3. es6 のテンプレート文字量を使用します (ただし、私はテンプレート文字列を使用してこれを呼び出します。 . .)

前後に(`)を付けて、途中に出力したい内容を書くだけです。ラベルを書けばラベルを出力します。\nと書けば、という意味です。変数を記述した場合は、変数が表す値は出力されませんが、変数名が出力されます。例えば、変数countryの値が「中国」の場合、中国の値ではなく、変数countryの名前が出力されます。値を出力したい場合は、様式2を参照してください。

 var form3 = `<form id="myform" method="post">
    <input type="text" name="uname" style="height:20px;width:100%;" />
    <input type="password" name="pwd" style="height:20px;width:100%;" />
  </form>`

ログイン後にコピー

フォーム 2: 変数を含むタグ要素の出力

1.エスケープ記号を使用します

var country = "中国";
var table = "<table border=\"1\" style=\"width:100%;\">";
table += "<caption>国家信息列表</caption>";
table += "<thead><tr><th>ID</th><th>Name</th></tr></thead>";
table += "<tbody><tr><td>1</td><td>"+country+"</td></tr></tbody>";
table += "</table>";

ログイン後にコピー

2.一重引用符を使用します

var country = "中国";
var table = &#39;<table border="1" style="width:100%;">&#39;;
table += &#39;<caption>国家信息列表</caption>&#39;;
table += &#39;<thead><tr><th>ID</th><th>Name</th></tr></thead>&#39;;
table += &#39;<tbody><tr><td>1</td><td>"&#39;+country+&#39;"</td></tr></tbody>&#39;;
table += &#39;</table>&#39;;

ログイン後にコピー

3. es6 のテンプレート文字量を使用します (ただし、これを呼び出すためにテンプレート文字列を使用するのが好きです...)

上記の country="China" などの変数の値を出力し、中国の価値を輸出するにはどうすればよいですか?

実際には、プレースホルダーを使用して ${ } を表し、括弧内の部分に出力したい変数が表す変数名を記述することができます。

var country = "中国";
var table = `<table border="1" style="width:100%;">`;
table += `<caption>国家信息列表</caption>`;
table += `<thead><tr><th>ID</th><th>Nane</th></tr></thead>`;
table += `<tbody><tr><td>1</td><td>${country}</td></tr></tbody>`;
table += `</table>`;

ログイン後にコピー