The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> duplicate a div
mattis
post Sep 18 2015, 04:34 AM
Post #1





Group: Members
Posts: 9
Joined: 18-September 15
Member No.: 23,547
Hello! i try to duplicate a div but cant get the code to work on the div i want to duplicate, it works on all divs but not the one i want to duplicate.. blink.gif Hope some of you can help me solve this problem.

Html Code:
<div id="container">
<h2> Varfor?</h2>
<h3> Usp: </h3>
<div>
<span contenteditable="true">Skriv har</span>
</div>

</div>

<div id="bubbla">
<div class="text1">
<h3> Plattform </h3>
<span contenteditable="true">nagot</span>
</div>
<div class="text2">
<h3> Ledord </h3>
<span contenteditable="true">nagot</span>
</div>
<div class="text3">
<h3> Mätetal </h3>
<span contenteditable="true">nagot</span>
</div>
</div>
<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
var elmnt = document.getElementsByTagName("DIV")[2];
var cln = elmnt.cloneNode(true);
document.body.appendChild(cln);
}
</script>
</body>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 18 2015, 07:36 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,649
Joined: 10-August 06
Member No.: 7
Which DIV do you want to clone? Javascript arrays start counting from with zero, so this part:

CODE
var elmnt = document.getElementsByTagName("DIV")[2];

applies to the third DIV (the one with the ID "bubbla"). It might be safer to simply use

CODE
var elmnt = document.getElementById("bubbla");

instead.

As a sidenote, note that the ID value of the DIV is cloned too, and since HTML does not allow two identical ID values on the same page you should change ID of the cloned DIV.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
mattis
post Sep 18 2015, 08:05 AM
Post #3





Group: Members
Posts: 9
Joined: 18-September 15
Member No.: 23,547
QUOTE(Christian J @ Sep 18 2015, 07:36 AM) *

Which DIV do you want to clone? Javascript arrays start counting from with zero, so this part:

CODE
var elmnt = document.getElementsByTagName("DIV")[2];

applies to the third DIV (the one with the ID "bubbla"). It might be safer to simply use

CODE
var elmnt = document.getElementById("bubbla");

instead.

As a sidenote, note that the ID value of the DIV is cloned too, and since HTML does not allow two identical ID values on the same page you should change ID of the cloned DIV.


Thanks for your help, but i tried that earlier and still it dossent work, and yes the one i want to clone is "bubbla"
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
mattis
post Sep 18 2015, 08:14 AM
Post #4





Group: Members
Posts: 9
Joined: 18-September 15
Member No.: 23,547
QUOTE(Christian J @ Sep 18 2015, 07:36 AM) *

Which DIV do you want to clone? Javascript arrays start counting from with zero, so this part:

CODE
var elmnt = document.getElementsByTagName("DIV")[2];

applies to the third DIV (the one with the ID "bubbla"). It might be safer to simply use

CODE
var elmnt = document.getElementById("bubbla");

instead.

As a sidenote, note that the ID value of the DIV is cloned too, and since HTML does not allow two identical ID values on the same page you should change ID of the cloned DIV.


The code is working on all divs, but not at "bubbla" so may it be something with that div that making some sort of error?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 18 2015, 09:27 AM
Post #5


.
********

Group: WDG Moderators
Posts: 9,649
Joined: 10-August 06
Member No.: 7
It works for me when I use

CODE
var elmnt = document.getElementsByTagName("DIV")[1];

Could you post the complete code of the page? Maybe something else is interfering.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
mattis
post Sep 18 2015, 09:38 AM
Post #6





Group: Members
Posts: 9
Joined: 18-September 15
Member No.: 23,547
QUOTE(Christian J @ Sep 18 2015, 09:27 AM) *

It works for me when I use

CODE
var elmnt = document.getElementsByTagName("DIV")[1];

Could you post the complete code of the page? Maybe something else is interfering.

sure, here it is.

code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="stil.css">
</head>

<body>

<div id="container">
<h2> Varför?</h2>
<h3> Usp: </h3>
<div>
<span contenteditable="true">Skriv här</span>
</div>

</div>

<div id="bubbla">
<div class="text1">
<h3> Plattform </h3>
<span contenteditable="true">något</span>
</div>
<div class="text2">
<h3> Ledord </h3>
<span contenteditable="true">något</span>
</div>
<div class="text3">
<h3> Mätetal </h3>
<span contenteditable="true">något</span>
</div>
</div>
<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
var elmnt = document.getElementsByTagName("DIV" [1]);
var cln = elmnt.cloneNode(true);
document.body.appendChild(cln);
clone.id = "bubblaa";

}
</script>
</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Sep 18 2015, 11:32 AM
Post #7


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
One of these things is not like the other...

QUOTE
var elmnt = document.getElementsByTagName("DIV")[1];

QUOTE
var elmnt = document.getElementsByTagName("DIV" [1]);
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
mattis
post Sep 18 2015, 12:20 PM
Post #8





Group: Members
Posts: 9
Joined: 18-September 15
Member No.: 23,547
QUOTE(Darin McGrew @ Sep 18 2015, 11:32 AM) *

One of these things is not like the other...

QUOTE
var elmnt = document.getElementsByTagName("DIV")[1];

QUOTE
var elmnt = document.getElementsByTagName("DIV" [1]);




Hehe no i saw that, but still it dosent work.. blink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
mattis
post Sep 18 2015, 12:25 PM
Post #9





Group: Members
Posts: 9
Joined: 18-September 15
Member No.: 23,547
oh sorry guys, i think i found my problem, i had the position set at fixed in my css...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Client-side Scripting · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 16th April 2024 - 11:58 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC