CODEWITHSUNDEEP
htmlcss
AbuMariam
AbuMariam

Reputation: 3678

Control placement of dynamically inserted div

I have a page into which a div is dynamically inserted by some 3rd party javascript code. I want the div to be placed inside another div but I cannot control its insertion. Right now it is being placed below the footer. Is there anyway to get it in the right location (inside the main-container div)? Below is the code and the fiddle...

<body>
<div id="header-nav">
    Some header stuff
</div>

<div id="main-container">
    This is where my div belongs
</div>

<div id="footer">
    Some footer stuff
</div>
<!-- this part is dynamically inserted when the page loads  -->
<div id="mydiv"> 
    I was inserted here but it is not my home
</div>
</body>

http://jsfiddle.net/jjaleel/h3d2j7yx/

I am able to override the css of mydiv on page, could I use that or some other css solution to put in the right place?

Upvotes: 0

Views: 165

Answers (3)

M H
M H

Reputation: 2183

I modified your code. Added a border so you could see it was working.

http://jsfiddle.net/h3d2j7yx/1/

<body>
    <div id="header-nav">
        Some header stuff
    </div>

    <div id="main-container" style="border:1px solid black;">
        This is where my div belongs
    </div>

    <div id="footer">
        Some footer stuff
    </div>

    <div id="mydiv"> 
        I was inserted here but it is not my home
    </div>
</body>

<script>

//Call the function to grab the div and insert it into the main div    
test();

function test() {
if( document.getElementById('mydiv') != "undefined")
    {
    var element = document.getElementById('mydiv');
    document.getElementById('main-container').appendChild(element);
       }       
}
</script>

Upvotes: 2

Viraj Shah
Viraj Shah

Reputation: 982

If you are inserting using javascript, always do what works best with javascript. So for example we can create an element like this:

var div = document.createElement("DIV"); //creates a javscript DIV element
div.className("dynamic-div"); //sets a class name <div class="dynamic-div">
div.innerHTML = "This is a div, but is not my home or whatever"; //add some text
document.body.appendChild(div); //adds the javascript element as an HTML element

and then we can have pre loaded CSS:

.dynamic-div {
  background-color: red;
  position: fixed;
}

remember that the CSS will load, but as soon as the element is displayed on the screen, the CSS will take action and format everything just the way you want.

so one the function is called and the DIV is added with the defined classname, the CSS will take over and format the object the way you want it to. Just always have the CSS already loaded. It provides:

  • Less javascript work
  • A lot faster
  • Will only be used if/once needed
  • Already ready to use at startup

Upvotes: 0

Saumil
Saumil

Reputation: 2517

If you can't control the placement of the div, you can place it anywhere you want after it is placed.

Include the below script in your page,

function moveDiv(){
    var newDiv = document.getElementById("mydiv");
    var parent = document.getElementById("header-nav");
    parent.appendChild(newDiv);
}
moveDiv();

Substitute "header-nav" with the element's id where you want to append the dynamically created div.

One important thing to consider here is that the above script should be placed below the 3rd party javascript which is generating the dynamic div, because if this script is executed before the 3rd party script then it may not find the element having id="mydiv" as it is generated by the 3rd party javascript.

Upvotes: 1

Related Questions