올바르게 사용하는 방법 .append()

-4

최근 jQuery를 배우기 시작하면서 문제가 발생했습니다. jQuery의 코드 형식은 C/C++의 배경에서 나에게 익숙하지 않기 때문에 생소합니다.올바르게 사용하는 방법 .append()

내 문제는 .append()가 단순히 추가되지 않는 것 같습니다. 나는 최근에 jQuery에서 팝업을 만들기 위해 스크립트 작업을하고 있으며, body에 요소를 추가해야했습니다. 아무 일도하지. 추가 테스트 후 .append()가 작동하지 않는 것 같습니다. 내 결론은 아마 그것을 잘못 사용하고 있지만 나는 어떻게 깨닫지 못한다.

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

편집 1 : HTML은 HTML 만 중 일부는 공간 (I가 추가있어 지역에서 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>

을 요청했다. <script> 요소가 맨 아래에 있습니다.

출처

2016-08-12 James Balajan

귀하의 ID는 (Contact하지 contact) 대문자,하지만 당신은 자바 스크립트에 모두 소문자를 사용하고 있습니다.

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

또는 HTML에 소문자 IDS는합니다 : 너무 jQuery를 선택기를 변경 당신이 날 부정 투표를 할 이유

<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

코드가 정상적으로 보입니다. HTML에 div가 포함되어 있는지 확인하십시오. 여기 코드에 JSFiddle이 있는데 완벽하게 작동합니다.

https://jsfiddle.net/edtqpvym/

내가

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

편집을 테스트하는 데 사용되는 HTML : 당신은 대문자와 소문자의주의해야합니다! HTML에서는 div ID의 이름을 대문자로 지정하고 JQuery에서는 소문자로 호출합니다. 그것은 당신의 문제를 해결합니다. div를 소문자로 지정하는 것이 좋습니다. 또한이 같은 = 전에

id = "Contact" class = "nav"

쓰기를 공백을 사용하지 않아야

id="Contact" class="nav"

귀하의 코드는 그 간격에 충실하면 정말 지저분 얻을 수 있습니다. 당신의 HTML에서

출처

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()

답변

관련 문제