CODEWITHSUNDEEP
javascriptjqueryangularjshtml
Suresh B
Suresh B

Reputation: 1652

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

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>

enter image description here

Upvotes: 2

Views: 1776

Answers (2)

Sharmila
Sharmila

Reputation: 795

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"/>');

Upvotes: 1

Ram_T
Ram_T

Reputation: 8484

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

Upvotes: 0

Related Questions