How to append Parent and child div on div element in angularjs?

Question

I am newbie in angularjs. Here I added my requirement as image. In side my controller I need get selected element and in runtime in need to add div's based on the source will diced parent or child. help me on this

Example 1:-

before:-
  Username: <input type="text" name="user">
  Username1: <input type="text" name="user1">
After:-
    <div ><!-- 1st-->
      Username: <input type="text" name="user">
    Username1: <input type="text" name="user1">
    </div>

Example 2:-

Before:-
        <div ><!-- 1st-->
          Username: <input type="text" name="user">
        Username1: <input type="text" name="user1">
        </div>
After:-
        <div ><!-- 1st-->
          <div ><!-- 2nd-->
            Username: <input type="text" name="user">
            Username1: <input type="text" name="user1">
          </div>
        </div>

You are certainly "seeing" things in a wrong way (meaning not very suitable for angular, it's not jQuery). Tell us what you want to achieve more in detail and we will be able to give answers or at least tails. — Piou
– Piou, Commented Dec 23, 2016 at 5:57

Sharmila · Accepted Answer · 2016-12-23 10:43:26Z

1

Go through this link. I have done in jquery. For angular replace $ with angular.element

https://plnkr.co/edit/GiY68oZdvj6IXYhgQwux?p=preview

var elems = $('.same').eq(4);
$( "#sam1" ).wrap( "<div class='new'></div>" );
$('#sam2').siblings().wrapAll( "<div class='secondnew'></div>")
$('.same').siblings().eq(1).css('color', 'red');
$('.same').siblings().eq(2).css('color', 'red');
$('#sam3').nextUntil(elems).addBack().wrapAll('<div class="wrapper"/>');

edited Dec 23, 2016 at 10:43

answered Dec 23, 2016 at 10:29

Sharmila

7954 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ram_T · Accepted Answer · 2016-12-23 06:23:11Z

0

This is just an idea but works. Actually, both are same cases. You just need to edit the id's if there. Thats it

In first case get parentDiv with its children. document.getElementById('parentDiv'); with innerHTML and Children and store it in a varibale ex, parentDiv. Next, create holder element to the above elements.

var holder = document.createElement('holder');

place this where you want and append the parentDiv as a child

holder.appendChild('parentDiv');

delete parentDiv from DOM.

Second case is also same. Just id's or attributes are matter here.

        var parent = document.getElementById('parent');
        var parentParent = document.createElement('div');
        parentParent.setAttribute('id', 'parentParent');
        document.body.appendChild(parentParent);
        parentParent.appendChild(parent);

find there lines in https://plnkr.co/edit/Y2cJrUGYcygvM9i6wKx5?p=preview index.html

edited Dec 23, 2016 at 6:23

answered Dec 23, 2016 at 6:00

Ram_T

8,50411 gold badges42 silver badges64 bronze badges

4 Comments

Suresh B Over a year ago

how to add parent div for the element

Suresh B Over a year ago

can you share me some example in plunker or jsfiddle?

Ram_T Over a year ago

I edited my answer. Please check it out. First case is done with that

Ram_T Over a year ago

I also updated the plunker as you want in first case

Collectives™ on Stack Overflow

How to append Parent and child div on div element in angularjs?

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related