html elements_javascript 기술 생성 및 삭제에 대한 js 구현 요약-JS 튜토리얼-php.cn

html elements_javascript 기술 생성 및 삭제에 대한 js 구현 요약

WBOY

풀어 주다： 2016-05-16 15:37:39

원래의

1342명이 탐색했습니다.

div 요소를 만들고 싶은 경우.

1. DOM 객체를 사용하여 생성:

document.createElement('div') 메소드를 사용하여 요소를 생성합니다.

2. JQuery를 사용하여 다음을 만듭니다.

$('

JQuery

'를 통해 생성된 New 요소) 메서드를 사용하여 요소를 직접 생성합니다.

id가 'div2js'인 div 요소를 삭제해야 하는 경우.

1. DOM 객체 사용

먼저 삭제된 요소의 상위 요소를 찾아내고, 상위 요소를 통해 삭제해야 할 하위 요소를 삭제해야 합니다.

var el = document.getElementById('div2js');
 el.parentNode.removeChild(el);

로그인 후 복사

2. JQuery를 사용하세요

직접 찾아서 삭제하세요.

$('#div2js').remove();

마지막으로 예시를 살펴보겠습니다

<script type="text/javascript" language="Javascript"> 
function InputOnBlur() 
{    var name=document.getElementById("name").value; 

     if(name.length >10 || name.length<2) 
       { 
        var element=document.getElementById("message"); 
      if(element) 
      { 
      //alert(element.parentNode.innerHTML); 
      element.parentNode.removeChild(element); 
      } 
               var MySpan=document.createElement("span"); 
               document.getElementById("containers").appendChild(MySpan); 
               MySpan.id = "message"; 
               MySpan.innerHTML = "<img src='false.jpg' alt='请输入正确的姓名'/>请输入正确的姓名"; 
        } 
        
     else{ 
      var element=document.getElementById("message"); 
      if(element) 
      { 
      //alert(element.innerHTML); 
      element.parentNode.removeChild(element); 
      } 
               var MySpan=document.createElement("span"); 
               document.getElementById("containers").appendChild(MySpan); 
               MySpan.id = "message"; 
               MySpan.innerHTML = "<img src='true.gif' alt='该用户名输入正确'/>该用户名输入正确"; 
          } 
} 
</script>
<div>  
姓名：<input id="name" type="text" onblur="InputOnBlur()" /><span id="containers"></span></div>  
<script language="javascript">  
document.getElementById("containers").innerHTML = "<font color=red>请输入姓名</font>";

로그인 후 복사