要素を作成するための JavaScript メソッド (コード)-jsチュートリアル-php.cn

要素を作成するための JavaScript メソッド (コード)

不言

リリース： 2019-03-20 11:32:44

転載

2411 人が閲覧しました

この記事は JavaScript で要素を作成する方法 (コード) についての内容であり、一定の参考価値がありますので、困っている友人が参考になれば幸いです。

#1. 要素 1 の document.write()を動的に作成します。

たとえば、li タグをページに出力します

<pre class="html" name="code"><span style="font-size:12px;"><script>
  document.write("<li>123</li>");</script></span>

ログイン後にコピー

これは body タグに挿入されますが、ページのレイアウトに影響を与え、さらにはページの元のコンテンツを洗い流して出力コンテンツのみを表示するため、このメソッドはほとんど使用されません。

2.要素2のinnerHTML

<span style="font-size:12px;"><body>
<div id="box"></div>
<script>
  var box = document.getElementById("box");
  box.innerHTML = "<p>这是p标签</p>";
</script>
</body></span>

ログイン後にコピー

を動的に作成すると、divタグ内にpタグが挿入され、ページ上に「これはタグです」と出力されます。追加するタグが多い場合に使用する方法です。

3. 要素 3 を動的に作成します document.createElement()

<span style="font-size:12px;"><body>
<div id="div"></div>
<script>
  var divobj = document.getElementById("div"); var li = document.createElement("li"); //创建一个li标签 li.innerHTML = "123"; //给li标签赋值
divobj.appendChild(li); //将创建好的li标签追加到box标签中 </script> </body></span>

ログイン後にコピー

div タグの下に li タグが作成されます。必須このメソッドはめったに使用されません

この記事はここで終了です。さらに興味深い内容については、PHP 中国語 Web サイトの
JavaScript チュートリアルビデオ
列に注目してください。
以上が要素を作成するための JavaScript メソッド (コード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。