집 > 기사 > 웹 프론트엔드 > HTML 요소를 동적으로 생성하고 요소에 속성을 추가하는 방법 소개(코드 첨부)

HTML 요소를 동적으로 생성하고 요소에 속성을 추가하는 방법 소개(코드 첨부)

不言원래의: 2018-07-21 11:35:352128검색

이 문서에서는 HTML 요소를 동적으로 생성하고 요소에 속성을 추가하는 방법(코드 첨부)을 소개합니다. 내용이 매우 좋습니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

HTML 요소를 동적으로 생성하는 세 가지 방법이 있습니다.

첫 번째 방법: 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>

두 번째: 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>

세 번째: jQuery로 노드 만들기

jQuery에서 DOM 개체를 만들고 jQuery의 팩토리 함수를 사용합니다. $()를 완료하려면 형식은 다음과 같습니다.

$(html), $(html)은 수신 HTML 태그 문자열을 기반으로 DOM 객체를 생성하고 DOM 객체를 jQuery 객체로 래핑한 후 첫 페이지.

생성된 노드를 jQuery의 텍스트에 삽입하고, 추가() 및 기타 방법을 사용합니다. jQuery에서 노드를 삽입하는 방법은 다음과 같습니다.

1.append(): 일치하는 각 요소에 콘텐츠를 추가합니다

2.appendTo (): 기존의 $(A).append(B) 메소드를 반전하여 일치하는 모든 요소를 지정된 요소에 추가합니다. B를 A에 추가하는 대신 A가 B

3.prepend에 추가됩니다. (): 각 요소 앞에 콘텐츠를 추가합니다. 일치하는 요소

4.prependTo(): 일치하는 모든 콘텐츠를 지정된 요소 앞에 추가합니다. 이 작업은 prpend() 메서드로 반전됩니다.

5.after(): 일치하는 모든 콘텐츠를 지정된 요소 앞에 추가합니다. 일치 후 콘텐츠 삽입 요소

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 요소를 동적으로 생성하고 요소에 속성을 추가하는 방법 소개(코드 첨부)

관련 기사