ホームページ > 記事 > ウェブフロントエンド > HTML要素を動的に生成し、要素に属性を追加する方法の紹介（コードは添付）

HTML要素を動的に生成し、要素に属性を追加する方法の紹介（コードは添付）

不言オリジナル: 2018-07-21 11:35:352061ブラウズ

この記事では、HTML 要素を動的に生成し、要素に属性を追加する方法について説明します (コードが添付されています)。必要な方はぜひ参考にしてください。

HTML 要素を動的に生成するには 3 つの方法があります:

1 つ目の方法: document.createElement() で要素を作成し、appendChild() メソッドを使用してその要素を指定されたノードに追加します

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="main">
    <span id="login"></span>
</div>
</body>
<script>
    var link = document.createElement(&#39;a&#39;);
    link.setAttribute(&#39;href&#39;,&#39;#&#39;);
    link.setAttribute(&#39;id&#39;,&#39;login&#39;);
    link.style.color = &#39;green&#39;;
    link.innerHTML = &#39;登录&#39;;
    var main = document.getElementById(&#39;main&#39;);
    main.appendChild(link);
</script>
</html>

2つ: innerHTMLを使用して、指定したノードに要素を直接追加します

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="main">
    <span id="login"></span>
</div>
</body>
<script>
    var link = document.createElement(&#39;a&#39;);
    //使用innerHTML将元素直接添加到指定节点
    main.innerHTML = "<a href=&#39;#&#39; id=&#39;login&#39; style=&#39;color: red;&#39;>登录</a>";
</script>
</html>

3つ目: jQueryを使用してノードを作成します

jQueryでDOMオブジェクトを作成し、jQueryを使用しますファクトリー関数$() で完了します。形式は次のとおりです:

$(html)、$(html) は、受信した HTML タグ文字列に基づいて DOM オブジェクトを作成し、DOM オブジェクトを jQuery オブジェクトにラップしてから、表紙。

作成したノードを jQuery のテキストに挿入し、append() などのメソッドを使用します。 jQuery にノードを挿入するメソッドは次のとおりです:

1. append(): 一致する各要素にコンテンツを追加します

2.appendTo (): 従来の $(A).append(B) メソッドを逆にして、一致するすべての要素を指定された要素に追加します。B を A に追加する代わりに、A を B に追加します

3.prepend (): コンテンツをそれぞれの先頭に追加します。一致する要素

4.prependTo(): 一致するすべてのコンテンツを指定された要素の先頭に追加します。これは、prpend() メソッドで反転されます

5.after(): 一致するすべてのコンテンツを指定された要素の先頭に追加します一致した後にコンテンツを挿入しますelements

6.insertAfter(): 一致するすべての要素を、指定された要素の後に挿入します。after() メソッドで逆にします

7.before(): 一致する各要素の前にコンテンツを挿入します

8.insertBefore(): 一致する各要素を挿入します指定されたコンテンツの前の要素を before() メソッドで反転します

<!DOCTYPE html> 
<html>
<head>
   <meta charset="UTF-8">
   <title></title>
   <script src="jquery-1.11.1.min.js"></script>
   <style type="text/css">
       .newStyle{
            color:red
       }
   </style>

<script>
   $(function(){
   var link=$(&#39;<a href="#" id="link" style="color:pink">登录</a>&#39;);
   $(&#39;#main&#39;).append(link).addClass("newStyle");
   })
</script>
</head>
 
<body>
   <div id="main"></div>
</body>
</html>

HTML要素を動的に生成し、要素に属性を追加する方法の紹介（コードは添付）

関連記事