---
title: "Problem med .appendTo (jQuery)"
type: "forum-thread"
url: "https://www.webforum.nu/amne/webbutveckling/185176-problem-med-appendto-jquery"
topic: "Webbutveckling"
topic_url: "https://www.webforum.nu/amne/webbutveckling"
author: "ramo_and"
published: "2010-11-09T12:20:59.000Z"
updated: "2010-12-28T14:42:12.000Z"
replies: 20
views: 1139
page: 1
pages: 2
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/webbutveckling/185176-problem-med-appendto-jquery"
---

# Problem med .appendTo (jQuery)

_Sida 1 av 2._

## #1 — ramo_and, 2010-11-09T12:20Z

Hej,

Jag vill kunna lägga till lite hmtl kod i en div med hjälp av jQuery. Jag har kodat såhär:

```
<script type="text/javascript">
$(document).ready(function() {

$("<div id='registration'><p>Har du inget konto?<span><a href='http://shop.textalk.se/se/login.php?tws_shopid=19194&tws_mode=newbuyer'>Registrera dig här</a></span></p></div><div id='main_nav'><ul><li class='home'><a class='selected' href='#'>Hem</a></li><li class='sales'><a href='http://shop.textalk.se/se/shopwindow.php?id=19194&shopwindow=3334523'>Kampanjer</a></li><li class='buying_conditions'><a href='http://shop.textalk.se/se/shopwindow.php?id=19194&shopwindow=3298836'>Köpvillkor</a></li><li class='about'><a href='#'>Om Port Nordic</a></li></ul></div>").appendTo('.login');
});
</script>
```

Och detta skall då läggas till i diven "login". Jag har testat koden på <http://jsfiddle.net/> och där funkar den perfekt. Men när jag lägger upp på den på vår webbutik som vi håller på med så funkar det inte alls.. Kan för övrigt nämna att vi använder oss av Textalks webbutikslösning.

Permalänk: https://www.webforum.nu/p/185176

## #2 — voigtann1, 2010-11-09T12:30Z

Utan att få mer html struktur än så, så är det omöjligt att säga vad som är fel, ni kan ha det i en iframe/frame fönster, du placera kanske JS koden helt galet.

ladda ner firebug eller något annat verktyg och se om $('.login') ge dig en kollektion på er hemsida, få du något felmeddelande på er webbshop?

Ge all html kod du har (som du kan dela med dig, plocka bort texter som du inte få visa) men HTML strukturen hade underlättat jätte mycket för att kunna hjälpa dig.

Permalänk: https://www.webforum.nu/p/2259007

## #3 — ramo_and, 2010-11-09T12:39Z

Får inget felmeddelande på webbshopen. Jag lägger in denna kod på samma ställe som jag har all annan jQuery kod. Man får då lägga till eget html-innehåll i ett fält i webbshopens admin-panel. Den hamnar då i sidhuvudet och inte i \<head\> taggen. men resten av jQuery grejerna funkar ju så ja fattar inte varför detta inte funkar.. verkar vara vissa grejer som funkar bara :S 

htmlkoden i sidhuvudet ser ut så här ungefär 

```
<td class="twsupper">
  <tbody>
    <tr align="middle">
      <td class="twsupper">
      <td class="twsupper">
        <div class="object_horizontal object_login">
          <div class="login">Här vill jag lägga till extra html</div>
        </div>
      <td class="twsupper">
      <td class="twsupper">
      <td class="twsupper">
      <td class="twsupper">
    </tr>
  </tbody>
</td>
```

Permalänk: https://www.webforum.nu/p/2259009

## #4 — voigtann1, 2010-11-09T12:46Z

Varför måste du lägga in kod med hjälp av JS, har ni inte möjlighet att ändra html strukturen? DOM:en är långsammare än om du har möjlighet att lägga in det manuellt.

Kan säga med rätt stor sannolikhet att om du skriver om din html (stänger dina element) så kommer det fungera betydligt bättre än vad det kan göra nu (även om det kanske inte löser ditt problem).

skriv i ditt addressfält: **javascript:alert($(".login").length);**Vad får du för värde när du är på din sida?

<http://jsbin.com/uqesu4> med den html kod du har skickat så fungera det, börja undra om du inte kör två JS ramverk(?)

få du bättre resultat med:

```
(function($) {
	$(document).ready(function() {
		$("<div id='registration'><p>Har du inget konto?<span><a href='http://shop.textalk.se/se/login.php?tws_shopid=19194&tws_mode=newbuyer'>Registrera dig här</a></span></p></div><div id='main_nav'><ul><li class='home'><a class='selected' href='#'>Hem</a></li><li class='sales'><a href='http://shop.textalk.se/se/shopwindow.php?id=19194&shopwindow=3334523'>Kampanjer</a></li><li class='buying_conditions'><a href='http://shop.textalk.se/se/shopwindow.php?id=19194&shopwindow=3298836'>Köpvillkor</a></li><li class='about'><a href='#'>Om Port Nordic</a></li></ul></div>").appendTo('.login');
	});
})(jQuery);
```

Permalänk: https://www.webforum.nu/p/2259010

## #5 — ramo_and, 2010-11-09T13:00Z

Jag kan inte ändra html strukturen på något annat sätt än med JS. Jag kommer inte åt html strukturen alls.. Dessutom kör dom ju med tabeller och samma klassnamn på allt så de går ju typ inte att designa dem olika med CSS.. Helt värdelöst verkligen...

Jag får värdet 1 när jag skriver in javascript:alert($(".login").length); på min sida

Permalänk: https://www.webforum.nu/p/2259012

## #6 — voigtann1, 2010-11-09T13:02Z

Då är det inget problem med jquery(vilket det aldrig varit), för den hittar ett objekt, har var laddas jquery in och när kör du ditt skript?

Det ända jag kan se är att antingen körs en ajax snurra för att ladda in din .login kod, eller så försöker du köra jquery innan jquery har laddats in.

Permalänk: https://www.webforum.nu/p/2259013

## #7 — ramo_and, 2010-11-09T13:09Z

jQueryn laddas i head-tagen. Det har dom Textalk som "default" på alla sidor så att säga. Mitt egna script laddas precis före i twsupper-klassen, dvs

```
(...)
<td class="twsupper">
  script här>
</td>
<td class="twsupper">
  <div class="login">
    här skall extra html komma
  </div>
</td>
(...)
```

EDIT: Kan tillägga att det funkar om jag bara kör typ \<p\>Hello world\</p\>. Men när jag lägger till allt det jag vill funkar det inte.. Jag tog bort alla mellanslag och radbrytningar för att få de o funka på jsfiddle men de funka ändå inte på min sida.

Permalänk: https://www.webforum.nu/p/2259014

## #8 — voigtann1, 2010-11-09T13:25Z

Om din kod ser ut:

```
(...)
<td class="twsupper">
<script type="text/javascript">
(function($) {
	$(document).ready(function() {
		$("<div id='registration'><p>Har du inget konto?<span><a href='http://shop.textalk.se/se/login.php?tws_shopid=19194&tws_mode=newbuyer'>Registrera dig här</a></span></p></div><div id='main_nav'><ul><li class='home'><a class='selected' href='#'>Hem</a></li><li class='sales'><a href='http://shop.textalk.se/se/shopwindow.php?id=19194&shopwindow=3334523'>Kampanjer</a></li><li class='buying_conditions'><a href='http://shop.textalk.se/se/shopwindow.php?id=19194&shopwindow=3298836'>Köpvillkor</a></li><li class='about'><a href='#'>Om Port Nordic</a></li></ul></div>").appendTo('.login');
	});
})(jQuery);
</script>
</td>
<td class="twsupper">
  <div class="login">
    här skall extra html komma
  </div>
</td>
(...)
```

Så kommer det fungera OM jquery ligger i head, och tabellen inte ligger före head (vilket den inte borde).

Permalänk: https://www.webforum.nu/p/2259015

## #9 — ramo_and, 2010-11-09T13:55Z

Har gjort precis som du skrev men de funkar fortfarande inte... suck. Kan inte fatta vad som är fel. har aktiverat konsolen i firebug också o där kommer det inte upp något

Permalänk: https://www.webforum.nu/p/2259016

## #10 — voigtann1, 2010-11-09T14:05Z

Skall vara lite tjatig, men utan mer html kod så gå det inte att hjälpa mycket mer:
Om JQuery är inladdat så skall detta fungera (om nu inte din sajt kör jquery \< v1.0). Få du någon relevant info i Felkonsolen (firefox ctrl+shift+j)? Annars måste jag nog be om att få mer html kod.

Permalänk: https://www.webforum.nu/p/2259019

## #11 — ramo_and, 2010-12-28T13:23Z

Har stött på ett nytt problem med .appendTo

Jag vill lägga in en meny med jQuerys .appendTo men så fort jag lägger in länkar så funkar det inte.

Detta funkar (mer eller mindre):

```
<script type="text/javascript">
  $(document).ready(function() {

    $("<div id='sub_nav><ul><li class='woodline'></li></ul></div>").appendTo("#business_area_bg");

  });
</script>
```

Detta funkar inte:

```
<script type="text/javascript">
  $(document).ready(function() {

    $("<div id='sub_nav><ul><li class='woodline'><a href='sida.html'>Länk</a></li></ul></div>").appendTo("#business_area_bg");

  });
</script>
```

Vad kan det bero på? Kan man inte lägga in länkar på detta sättet med .appendTo eller?

Permalänk: https://www.webforum.nu/p/2265269

## #12 — voigtann1, 2010-12-28T13:26Z

Du måste nog bli lite mer noggrannare när du skriver, du glömmer stänga attributen i ditt id på din div#sub_nav:

```
$("<div id='sub_nav[red][b]'[/b][/red]><ul><li class='woodline'><a href='sida.html'>Länk</a></li></ul></div>").appendTo("#business_area_bg");
```

Färgat ' i röd för att visa vad du har glömt.

Permalänk: https://www.webforum.nu/p/2265270

## #13 — ramo_and, 2010-12-28T13:40Z

Oops! Ja det är helt rätt, får sluta slarva.. 

Men det funkar fortfarande inte när jag har länken med. Så fort jag tar bort länken så funkar det. Vad beror det på?

Permalänk: https://www.webforum.nu/p/2265272

## #14 — voigtann1, 2010-12-28T13:49Z

fungera för mig, få en div, ul, li och a element #business_area_bg finns det DOM objekt på din sida?

Permalänk: https://www.webforum.nu/p/2265273

## #15 — ramo_and, 2010-12-28T13:56Z

Okej.. ja, jag antar det men jag är inte säker. Vad är DOM objekt mer exakt?

Permalänk: https://www.webforum.nu/p/2265274

## #16 — voigtann1, 2010-12-28T13:58Z

<http://en.wikipedia.org/wiki/Document_Object_Model>

finns det något html element som har id business_area_bg? Skapar du det efter med jquery, så måste du köra ditt andra skript EFTER att objektet har skapats i DOM:en.

Permalänk: https://www.webforum.nu/p/2265275

## #17 — ramo_and, 2010-12-28T14:00Z

business_area_bg har jag skapat med jQuery FÖRE den jQueryn jag kör för menyn 'sub_nav' som jag vill skapa.. det funkar ju bara jag tar bort länken. Så fort jag lägger till den så funkar det inte...

Permalänk: https://www.webforum.nu/p/2265276

## #18 — voigtann1, 2010-12-28T14:02Z

kontrollera din HTML på objektet du skapar, kan vara att du glömmer att stänga element.
Och om du kan, försökt ha allt i en [DOM-Ready](http://www.learningjquery.com/2006/09/introducing-document-ready) metod på din sida, då vet du att den körs i ordning.

Permalänk: https://www.webforum.nu/p/2265277

## #19 — ramo_and, 2010-12-28T14:19Z

Ok, här är min kod. Har klippt ut och klistrat in här:

```
<script type="text/javascript">
  $(document).ready(function() {

    $("<div id='sub_nav'><ul><li class='woodline'><a href='sida.html'>Link</a></li></ul></div>").appendTo("#business_area_bg");

  });
</script>
```

Jag kan inte se något fel på html-objekten..

Permalänk: https://www.webforum.nu/p/2265278

## #20 — voigtann1, 2010-12-28T14:26Z

Nej, den koden fungera som jag skrev i <http://www.webforum.nu/showpost.php?p=1526056&postcount=14>. Lägg den koden direkt efter din kod när du skapar #business_area_bg eller kom med källkoden av dina andra skript.

Permalänk: https://www.webforum.nu/p/2265279

---

Tråden på webben: https://www.webforum.nu/amne/webbutveckling/185176-problem-med-appendto-jquery  
Nästa sida: https://www.webforum.nu/amne/webbutveckling/185176-problem-med-appendto-jquery/page2.md