Как правильно использовать .append()

-4

Я недавно начал изучать jQuery, и у меня возникли проблемы. Формат кода jQuery незнакомо из-за меня, исходя из фона C/C++.Как правильно использовать .append()

Итак, моя проблема в том, что .append() просто не добавляется. Я недавно работал над скриптом, чтобы создать всплывающее окно в jQuery, и вам нужно было добавить элемент в тело. Ничего не произошло. После дальнейшего тестирования .append(), похоже, не работает. Мой вывод: я, вероятно, злоупотребляю им, но я не знаю, как это сделать.

$('#contact').click(function (e) { 
    $('#about').append('<h1>test</h1>'); 
    e.preventDefault(); 
});

Edit 1: Html было предложено

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Canteen Mate</title> 
    <link rel="stylesheet" type="text/css" 
      href="https://fonts.googleapis.com/css?family=Roboto"> 
    <link rel="stylesheet" type="text/css" 
      href="https://fonts.googleapis.com/css?family=Roboto+Condensed"> 
    <link rel="stylesheet" type="text/css" 
      href="https://fonts.googleapis.com/css?family=Ubuntu"> 
    <link rel="stylesheet" type="text/css" href="css/home.css"> 
    </head> 
    <body> 
    <div class = "nav_wrapper" id = "nav_wrapper"> 
     <nav> 
     <ul> 
      <li class = "current"><a href="#nav_wrapper" id = "Home" class =  "nav">Home</a></li> 
      <li><a href="#about" id = "About" class = "nav">About</a></li> 
      <li><a href="#contact" id = "Contact" class = "nav">Contact</a> </li> 
    </ul> 
    </nav> 
</div> 
<div class = "wrapper"> 
    <img src="images/newfood.jpg" alt="Food" class="luncho"> 
    <div class = "text"> 
    <h1 class = "motto">Ordering from the canteen has never been so simple<br> 
    <p class = "motto-description" id = "about">Order food from your canteen from 
    anywhere as long as you have data.</p></h1> 
    </div> 
</div>

Только некоторые HTML включен, чтобы сохранить пространство (HTML, в области Я добавляющим к). Элемент <script> находится внизу.

источник

2016-08-12 James Balajan

Ваши идентификаторы в вашем HTML капитализируются (Contact, не contact), но вы используете все строчные буквы в вашем JavaScript. Изменение селекторы JQuery тоже:

$('#Contact').click(function (e) { 
    $('#About').append('<h1>test</h1>'); 
    e.preventDefault(); 
});

Или сделать идентификаторы нижнего регистра в HTML:

<a href="#about" id="about" class="nav">About</a> 
<a href="#contact" id="contact" class="nav">Contact</a>

источник

2016-08-12 09:35:29 eisbehr

Это, кажется, жизненно важно, хорошо заметили – NachoDawg

Ах, спасибо вам большое! Я посмотрел на href, потому что я идиот.Должен забыть мой кофе! Спасибо @eisbehr –

Добро пожаловать, @JamesBalajan! – eisbehr

-3

Ваш код кажется прекрасным. Убедитесь, что у вас также есть те divs в HTML. Вот JSFiddle, который я сделал с вашим кодом, и он отлично работает.

https://jsfiddle.net/edtqpvym/

HTML, я использовал для тестирования

<span id="contact">Click me</span> 
<div id="about"> 
</div>

EDIT: Вы должны заботиться о прописных и строчных букв! В HTML вы называете идентификаторы div в верхнем регистре, а в JQuery вы вызываете их в нижнем регистре. Это решает вашу проблему. Это хорошая практика, чтобы назвать divs строчными буквами. А также вы не должны использовать пробелы перед =

id = "Contact" class = "nav"

написать это:

id="Contact" class="nav"

Ваш код может получить очень грязный, если вы будете придерживаться этого интервала.

источник

2016-08-12 09:32:30 Dino

-2

$('#contact').click(function (e) { 
 
    $('#about').append('<h1>test</h1>'); 
 
    e.preventDefault(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="about">this is div "about".</div> 
 
<div id="contact">click here to see some action</div>

источник

2016-08-12 09:34:47 Laurianti

Почему вы проголосовали меня в негативе? – Laurianti

Потому что [заявив, что вы не можете воспроизвести проблему, описанную в вопросе, не является ответом] (http://meta.stackoverflow.com/questions/277923/are-your-code-works-fine-for-me-answers- приемлемо). – Scimonster

Хотя этот фрагмент кода может решить вопрос, [включая объяснение] (// meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) действительно помогает улучшить качество вашего сообщения. Помните, что вы отвечаете на вопрос читателей в будущем, и эти люди могут не знать причин вашего предложения кода. Также попробуйте не толковать код с пояснительными комментариями, так как это уменьшает читаемость кода и объяснений! – FrankerZ

Как правильно использовать .append()

ответ

Смежные вопросы