HTML 요소를 동적으로 생성하고 요소에 속성을 추가합니다.-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

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

不言

Apr 26, 2018 pm 05:03 PM

html요소

이 글은 주로 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

텍스트에서 웹 사이트로 : HTML의 힘Apr 13, 2025 am 12:07 AM

HTML은 웹 페이지를 작성하는 데 사용되는 언어로, 태그 및 속성을 통해 웹 페이지 구조 및 컨텐츠를 정의합니다. 1) HTML과 같은 태그를 통해 문서 구조를 구성합니다. 2) 브라우저는 HTML을 구문 분석하여 DOM을 빌드하고 웹 페이지를 렌더링합니다. 3) 멀티미디어 기능을 향상시키는 HTML5의 새로운 기능. 4) 일반적인 오류에는 탈수 된 레이블과 인용되지 않은 속성 값이 포함됩니다. 5) 최적화 제안에는 시맨틱 태그 사용 및 파일 크기 감소가 포함됩니다.

HTML, CSS 및 JavaScript 이해 : 초보자 안내서Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.

HTML의 역할 : 웹 컨텐츠 구조Apr 11, 2025 am 12:12 AM

HTML의 역할은 태그 및 속성을 통해 웹 페이지의 구조와 내용을 정의하는 것입니다. 1. HTML은 읽기 쉽고 이해하기 쉽게하는 태그를 통해 컨텐츠를 구성합니다. 2. 접근성 및 SEO와 같은 시맨틱 태그 등을 사용하십시오. 3. HTML 코드를 최적화하면 웹 페이지로드 속도 및 사용자 경험이 향상 될 수 있습니다.

HTML 및 코드 : 용어를 자세히 살펴 봅니다Apr 10, 2025 am 09:28 AM

"Code"는 "Code"BroadlyIncludeLugageslikeJavaScriptandPyThonforFunctureS (htMlisAspecificTypeofCodeFocudecturecturingWebContent)

HTML, CSS 및 JavaScript : 웹 개발자를위한 필수 도구Apr 09, 2025 am 12:12 AM

HTML, CSS 및 JavaScript는 웹 개발의 세 가지 기둥입니다. 1. HTML은 웹 페이지 구조를 정의하고 등과 같은 태그를 사용합니다. 2. CSS는 색상, 글꼴 크기 등과 같은 선택기 및 속성을 사용하여 웹 페이지 스타일을 제어합니다.

HTML, CSS 및 JavaScript의 역할 : 핵심 책임Apr 08, 2025 pm 07:05 PM

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

HTML은 초보자를 위해 쉽게 배우나요?Apr 07, 2025 am 12:11 AM

HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.

HTML의 시작 태그의 예는 무엇입니까?Apr 06, 2025 am 12:04 AM

anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.