Используйте Jquery селектор, чтобы добавить HTML-тег

Question

У меня есть HTML-код с абзацем и контактной формой. Когда браузер отключен JavaScript, я хочу показать контактную форму и абзац текста.

В противном случае я хочу показать кнопку контакта, которую пользователи могут щелкнуть, и появится форма.

Answer 1

Установить стиль кнопки на display:none;

Если JavaScript включен, скрыть форму по умолчанию и показать кнопку.

Затем, когда они нажимают кнопку контакта, покажите это.

$(document).ready(function(){ 
    $("#buttonID").show(); 
    $("#formID").hide(); 
    $("#buttonID").click(function(){ 
    $("#formID").show(); 
    }); 
}); 

Answer 2

<span id="formAndParagraph"> 
    <p id="Paragraph">lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p> 
    <form id="Contact"> 
     Name: <input type="text"><br> 
     Comment: <input type="text"><br> 
    </form> 
</span> 
<input type="button" id="Button" value="Click me" onclick="$('#formAndParagraph').show();" style="display:none"> 
<script> 
$('#formAndParagraph').hide(); 
$('#Button').show(); 
</script> 

jsFiddle here

Answer 3

Ok :) Так вот мое решение:

http://jsfiddle.net/tracyfu/Sj5cy/

И вот что он делает:

1. Я установил #contact-button css до display: none;, чтобы он автоматически скрывался независимо от того, присутствует ли JS. Таким образом, если JS отключен, кнопка не отображается.
2. В JS я показываю #contact-button, затем скрываю #contact-form. JQuery будет работать только тогда, когда JS включен в любом случае, так что это означает, что кнопка показывает и скрывает форму для людей, у которых есть JS. Для людей, у которых JS отключен, форма не изменяется и будет отображаться, как обычно.
3. Я добавил сообщение click, чтобы показать форму.

Целью этого решения является отсутствие кнопки, если JS отключен.