JavaScript에서 요소를 추가하고 삭제하는 방법-JS 튜토리얼-php.cn

JavaScript에서 요소를 추가하고 삭제하는 방법

醉折花枝作酒筹

풀어 주다： 2023-01-04 09:35:16

원래의

3712명이 탐색했습니다.

JS에서 요소를 추가하고 삭제하는 방법: 1. "appendChild("요소 이름")"를 사용하여 요소를 추가합니다. 2. "insertBefore(요소 이름, 요소를 추가할 위치)"를 사용하여 원하는 위치에 요소를 추가합니다. 3. 요소를 제거하려면 "removeChild("요소 이름")"을 사용하십시오.

JavaScript에서 요소를 추가하고 삭제하는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

JavaScript에서 요소를 추가하고 삭제하는 방법

요소를 추가하려면 먼저 요소를 만들어야 합니다. 새로 추가된 요소에 텍스트를 쓰려면 텍스트 노드도 만들어야 합니다. 텍스트 노드를 추가합니다. 새로 추가된 요소에 값이 삽입됩니다.

(1) createElement("요소 이름"): 이 메서드는 새 요소를 생성할 수 있습니다. 예를 들어, createElement("p")는 p 태그(요소/단락)가 생성되었음을 의미합니다.

(2) createTextNode("Text Content"): 이 메서드는 텍스트 노드를 생성할 수 있습니다. 예: createTextNode("I am new content")는 "I am new content" 값을 가진 텍스트 노드가 생성됨을 의미합니다.

(3)appendChild("요소 이름"): 새 요소를 추가합니다. 예: ul.appendChild("li")는 ul에 li 요소를 추가하는 것을 의미합니다.

(4) RemoveChild("Element Name"): 요소를 삭제합니다. 사용법은 (3)과 반대입니다.

다음 예에서는 li 요소를 ul에 동적으로 추가하고 매번 원래 li 앞에 추가합니다.

<script>
      window.οnlοad=function () {
          var UL=document.getElementsByClassName(&#39;box&#39;)[0];
          var btn=document.getElementsByTagName(&#39;button&#39;);
          var index=1;  //序号计数器
          btn[0].οnclick=function () {    //创建新节点，并添加新元素,新添加的元素总是在最前面
              var li=document.createElement(&#39;li&#39;),  //创建li元素
                  content=&#39;我是第&#39;+index+&#39;个li&#39;;    //li元素的文本节点的内容
              var text=document.createTextNode(content);  //创建li元素的文本节点
              index++;   //每创建一个li计数就+1
              var Li=UL.getElementsByTagName(&#39;li&#39;);    //获取页面中的li集合
              UL.insertBefore(li,Li[0]),li.appendChild(text);  //在页面中第一个li前面添加新的li标签
          }
          btn[1].οnclick=function () {  //删除添加的元素
              var li=document.getElementsByTagName(&#39;li&#39;)[0];
              if(!index%2==0){
                  li.parentNode.removeChild(li);
              }
          }
      }
</script>
</head>
<body>
<button>点击添加新的li元素</button>
<button>点击删除li元素</button>
<ul class="box">
</ul>
</body>

로그인 후 복사

참고: 새로 추가된 모든 li가 원래 li 앞에 오도록 하려면 insertBefore() 메서드를 사용해야 합니다. insertBefore() 方法了。

insertBefore()里面有两个参数值，第一个参数值为你要添加的元素名称，第二个参数值为要在哪里添加的元素的名称（值可以为 null），当为null时，效果就和appendChild()

insertBefore() 두 개의 매개변수 값이 있습니다. 첫 번째 매개변수 값은 추가하려는 요소의 이름이고, 두 번째 매개변수 값은 추가할 요소의 이름입니다. 추가하려고 합니다(값은 null일 수 있음). null인 경우 효과는 appendChild()와 같습니다.

예를 들어 위의 예에서는 매번 추가되는 li 요소가 맨 앞에 오도록 하고 싶습니다. 그런 다음 네 번째 단계만 변경하면 됩니다.

var Li=UL.getElementsByTagName("li");
UL.insertBefore(li,Li[0]);li.appendChild(text);

로그인 후 복사

즉, 새 요소를 추가하는 방법에는 두 가지가 있습니다: ①appendChild(), ②insertBefore(); 요소 삭제: RemoveChild()

권장 학습: javascript 비디오 튜토리얼

🎜

위 내용은 JavaScript에서 요소를 추가하고 삭제하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!