Append a child element to another div while having a reference to the orginal parent element

Question

I have this html code

<div id="left-container" class="w3-container w3-left">
    <div class="wordDiv w3-container w3-pale-green w3-leftbar w3-border-green w3-hover-border-red">
        <h1>Give</h1>
        <h3>Selected Definition:</h3>
        <ul style="display:none;">
            <li> offer in good faith </li>
            <li> inflict as a punishment </li>
            <li> afford access to </li> 

        </ul>
    </div>

    <div class="wordDiv w3-container w3-pale-green w3-leftbar w3-border-green w3-hover-border-red">
        <h1>Up</h1>
        <h3>Selected Definition:</h3>

        <ul style="display:none;">
            <li> to a higher intensity </li>
            <li> to a later time </li>
            <li> used up </li>

        </ul>
    </div>

</div>

<div id="right-container" class="w3-container w3-right"></div>

I want the user, once he click on one of the wordDiv's, to be able to see the potential definitions of that word in the right container (which are found in the "ul" element of each "wordDiv"), select one of the definitions, then I want to display the selected definition in the original wordDiv in the left-container.

You can found Jsfiddle Demo Here

You will need javascript to do that: add a listener on .wordDiv on click, and set then select the li you want, get its content and add it where you want — Elisabeth Hamel, Aug 03 '16 at 09:45
I know but how can I get back.. I mean after I append the "ul" to the right-container, how can I add the selected li definition to the right word div? — Mortada, Aug 03 '16 at 09:47

Aneesh Sivaraman · Answer 1 · 2016-08-03T10:02:34.793

0

Please check this fiddle

I have added li elements to another div based on the div which you are selected.

edited Aug 03 '16 at 10:02

answered Aug 03 '16 at 09:54

Aneesh Sivaraman

931
1
5
9

I want the user then to select one of the definitions, and then I display it in the original word div "Selected Definition".. so basically the "li" element is a radio input. – Mortada Aug 03 '16 at 10:07

score 0 · Answer 2 · answered Aug 03 '16 at 09:57

0

A solution using jQuery. Updated Fiddle

$(function() {
  $('.wordDiv').click(function() {
    var txt = $(this).find('ul').html();
    $('#right-container').html('<ul>' + txt + '</ul>')
  })
})

answered Aug 03 '16 at 09:57

Pugazh

9,453
5
33
54

I want the user then to select one of the definitions, and then I display it in the original word div "Selected Definition".. so basically the "li" element is a radio input. – Mortada Aug 03 '16 at 10:07

Reiner · Answer 3 · 2016-08-03T10:21:32.053

You can use the jQuery this variable in the click function, here is a working jQuery example of your request Updated Fiddle

It puts the li elements in the right div AND adds the onclick listener, which has the knowlege of its origin ;)

$('h1').click(function(){
var origin=$(this);
 $(this).siblings('ul').children().click(function(){
  $(this).parent().hide();
  $(origin).parent().append(this);
       $(this).replaceWith($('<div>' + this.innerHTML + '</div>'))
})
  
  $(this).siblings('ul').show();
  $("#right-container").append($(this).siblings('ul'));
  
})

$('ldi').click(function(){
 $(this).parent().hide();
 $(this).parent().parent().append(this);
  $(this).replaceWith($('<div>' + this.innerHTML + '</div>'))
})

Append a child element to another div while having a reference to the orginal parent element

3 Answers3