html 요소를 동적으로 추가/제거

Question

요청에 따라 양식을 동적으로 표시하려고합니다. HTML 요소에서 HTML 콘텐츠를 제거

HTML

<label for="Type" class="required">Type</label> 
<br> 
<input id="f01" name="fieldid[]" type="hidden" value="23"> 
<input class="23" id="01" required="1" name="type" type="checkbox" value="g_magic"><span> G magic</span> 
<div> 
    <div id="div0g_magic"></div> 
</div> 
<input id="f02" name="fieldid[]" type="hidden" value="23"> 
<input class="23" id="02" required="1" name="type" type="checkbox" value="four_five"><span> Four five</span> 
<div> 
    <div id="div0four_five"></div> 
</div> 
</div> 

JAVASCRIPT

$("#01").on("change", function() { 
    var valueid = $("#01").val(); 
    var fieldid = $("#f01").val(); 
    if ($(this).is(":checked")) { 
    send(valueid, fieldid); 
    } else { 
    $("#div0" + valueid).empty(); 
    } 
}); 

function send(valueid, fieldid) { 
    $.ajax({ 
    url: '/echo/js/?js=hello%20world!', 
    success: function (response) { 

     $("#div0" + valueid).html(response.responseText); 

    }, 
    error: function (response) { 
     $("#div0" + valueid).html(response); 
    } 
    }); 
} 

$("#02").on("change", function() { 
    var valueid = $("#02").val(); 
    var fieldid = $("#f02").val(); 
    if ($(this).is(":checked")) { 
    send(valueid, fieldid); 
    } else { 
    $("#div0" + valueid).empty(); 
    } 
}); 

function send(valueid, fieldid) { 
    $.ajax({ 
    url: '/echo/js/?js=hello%20JS!', 
    success: function (response) { 

     $("#div0" + valueid).html(response.responseText); 

    }, 
    error: function (response) { 
     $("#div0" + valueid).html(response); 
    } 
    }); 
} 

CSS

.required:after { 
    color: #e32 !important; 
    content: ' * ' !important; 
    display: inline !important; 
} 

Answer 1

document.getElementById("element_id").innerHTML="" 

,536 HTML 요소에 HTML 콘텐츠를 추가

document.getElementById("element_id").innerHTML="<p>This is a new content</p>" 

Answer 2

난 당신의 코드를 볼 수 없습니다, 그래서 이것에 완전히 확신 할 수는 없지만, 당신이 동적으로 보여/할 양식 또는 양식을 숨기 같은 소리 요청에 따라 이것은 jQuery로 쉽게 수행 할 수 있습니다. 이 코드를 사용합니다 :

$("#element-id").hide(); 

또는 # 요소-ID가 당신이/숨기기를 표시 할 요소의 ID입니다

$("#element-id").show(); 

. 당신이 ID의의를 피하려고하거나 한 번에 여러 요소를 숨길 경우에는 요소를 '요소 클래스'와 같은 클래스를 제공 할 수 있습니다, 그리고 당신은 사용한다 :

$(".element-class").hide(); 

을이 당신이 찾고 있던 무슨이 아닌 경우 성취, 업데이트/의견을 남기고 잘하면 누군가가 더 많은 도움을 줄 수 있습니다!

Answer 3

메서드 send() make conflict. 변경 기능에서 send()에 다른 이름을 지정하십시오.