집 > 기사 > 웹 프론트엔드 > HTML 요소를 동적으로 생성하고 요소에 속성을 추가합니다.

HTML 요소를 동적으로 생성하고 요소에 속성을 추가합니다.

不言원래의: 2018-04-26 17:03:242567검색

이 글은 주로 HTML 요소를 동적으로 생성하는 방법과 요소에 속성을 추가하는 방법을 소개합니다. 이제 이를 공유합니다. 필요한 친구들이 참조할 수 있습니다.

첫 번째: `document.createElement()`는 요소를 생성한 다음 `appendChild()` 메서드를 사용하여 지정된 노드에 요소를 추가합니다. :

<!DOCTYPE html>  <html lang="en">  <head>  
    <meta charset="UTF-8">  
    <title></title>  </head>  <body>  <p id="main">  
    <span id="login"></span>  </p>  </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을 사용하여 지정된 노드에 요소를 직접 추가합니다. document.createElement()创建元素，再用appendChild()方法将元素添加到指定节点;

添加a元素：

<!DOCTYPE html>  <html lang="en">  <head>  
    <meta charset="UTF-8">  
    <title></title>  </head>  <body>  <p id="main">  
    <span id="login"></span>  </p>  </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>

第二种：使用innerHTML直接将元素添加到指定节点：

<!DOCTYPE html>  <html lang="en">  <head>  
    <meta charset="UTF-8">  
    <title></title>  
    <script src="jquery-1.11.1.min.js"></script>  
    <script>  
    $(function(){  
    var $link=$(&#39;<a href="#" id="link" style="color:pink">登录</a>&#39;);  
        $(&#39;#main&#39;).append($link);  

    })  
    </script>  </head>  <body>  <p id="main"></p>  </body>  </html>

第三种：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() 向每个匹配的元素之后插入内容

6.insertAfter()将所有匹配的元素插入到指定元素的后面,与after()方法颠倒

7.before()在每个匹配的元素之前插入内容

8.insertBefore()将每个匹配的元素插入到指定内容之前，与before()
    //使用createElement创建元素
    var dialog = document.createElement(&#39;p&#39;);    
    var img = document.createElement(&#39;img&#39;);    
    var btn = document.createElement(&#39;input&#39;);    
    var content = document.createElement(&#39;span&#39;);    // 添加class
    dialog.className = &#39;dialog&#39;;    // 属性
    img.src = &#39;close.gif&#39;;    // 样式
    btn.style.paddingRight = &#39;10px&#39;;    // 文本
    span.innerHTML = &#39;您真的要GG吗？&#39;;    // 在容器元素中放入其他元素
    dialog.appendChild(img);
    dialog.appendChild(btn);
    dialog.appendChild(span);
세 번째 유형: jQuery 노드 생성

jQuery에서 DOM 객체 생성, jQuery를 사용 팩토리 함수 $()가 완료되면 형식은 다음과 같습니다.

$(html);

$(html)은 수신된 DOM 객체를 기반으로 DOM 객체를 생성합니다. HTML 마크업 문자열 및 의지 이 DOM 개체는 jQuery 개체에 패키징되어 반환됩니다.

생성된 노드를 jQuery의 텍스트에 삽입하고 append()와 같은 메서드를 사용합니다. >

jQuery의 노드 삽입 방법은 다음과 같습니다:

1.append(): 일치하는 각 요소에 콘텐츠를 추가합니다
2.appendTo(): B를 A에 추가하는 대신 A를 B
3. prepend( ) 메서드: 일치하는 각 요소 앞에 콘텐츠를 추가합니다.
4.prependTo(): prpend()와 동일하게 일치하는 모든 콘텐츠를 지정된 요소 앞에 추가합니다. 메서드가 반대입니다

5.after() 일치하는 각 요소 뒤에 내용을 삽입합니다

6.insertAfter()일치하는 모든 요소를 삽입합니다. 요소는 지정된 요소 뒤에 삽입됩니다. 이는 after() 메서드

7로 반전됩니다.before()일치하는 각 요소 앞에 콘텐츠를 삽입합니다
8.insertBefore() before() 메서드를 사용하여 반전된 각 일치하는 요소를 지정된 콘텐츠 앞에 삽입합니다.🎜🎜
var popContent =[ 
&#39;<li class="monitory-point-li" indexcode="00000000001310013631">&#39;, 
&#39;&#39;, 
&#39;&#39;+formedName+&#39;&#39;, 
&#39;</li>&#39;
 ].join(&#39; &#39;);
$(&#39;.document&#39;).append(popContent);
🎜🎜javascript는 html 요소를 동적으로 추가합니다.🎜🎜두 가지 주요 대안이 있습니다: 🎜1 DOM을 사용하세요🎜

. 🎜2. html 템플릿을 사용하세요🎜
var popContent = &#39;<li class="monitory-point-li" indexcode="00000000001310013631">&#39;+ 
&#39;&#39;+ 
&#39;&#39;+formedName+&#39;&#39;+ 
&#39;</li>&#39;;
$(&#39;.document&#39;).append(popContent);
rrreee🎜또는 이 작성 방법을 사용하세요🎜rrreee🎜관련 권장 사항: 🎜🎜🎜jQuery 운영 html 요소 클릭 이벤트에 대한 자세한 설명🎜🎜🎜🎜🎜🎜 🎜🎜🎜

위 내용은 HTML 요소를 동적으로 생성하고 요소에 속성을 추가합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript jquery html 字符串 append 对象事件 dom innerHTML

성명：

이전 기사：HTML 상호작용다음 기사：HTML 상호작용

HTML 요소를 동적으로 생성하고 요소에 속성을 추가합니다.

첫 번째: document.createElement()는 요소를 생성한 다음 appendChild() 메서드를 사용하여 지정된 노드에 요소를 추가합니다. :

$(html);

관련 기사

첫 번째: `document.createElement()`는 요소를 생성한 다음 `appendChild()` 메서드를 사용하여 지정된 노드에 요소를 추가합니다. :