innerHTML not adding html content

Question

I believe I almost have this working. I have a footer already, but when the button is clicked it slides down along with it's contents. After it slides down, I have used javascript to remove that footer and it's contents and I have created another footer element. I have appended it to include a div. When I check the inspector element it shows the new footer and the empty div exists. However, when I add the innerHTML to the id of the div, it does not populate it with the code. Here is the code for the javascript:

var slide = document.getElementById('slide');
var info = document.getElementsByClassName('info');
var input = document.getElementById('input');
var footer = document.getElementById('footer');
var addFooter = document.createElement('footer');
var newFooterContent = '<div class="col-md-8 col-md-offset-2"><input type="text" class="form-control move-right" size="105" placeholder="Say &ldquo;Hello&rdquo; or whatever else is on your mind"> </div> <div class="col-md-2"> <button type="submit" class="btn btn-default">Submit</button> </div>'



$( document ).ready(function() {
    $( "#hidePic" ).click(function(e) {
        e.preventDefault();
        $( "#slide" ).slideToggle( "fast", function() {
            footer.parentNode.removeChild(footer);
            document.body.appendChild(addFooter);
            addFooter.appendChild(input);
            input.addInnerHTML = newFooterContent;
        });
    });
});

And if you're using jQuery then why not input.html(newFooterContent) among other things. — Shikkediel
– Shikkediel, Commented Sep 17, 2015 at 2:52

metal03326 · Accepted Answer · 2015-09-17 03:00:16Z

1

Replace

input.addInnerHTML = newFooterContent;

with

input.innerHTML = newFooterContent;

and it should work

answered Sep 17, 2015 at 3:00

metal03326

1,2632 gold badges13 silver badges15 bronze badges

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

2 Comments

user5096599 Over a year ago

That worked in the sense that when I check the inspector element it shows all that content is now in the new footer section, however - none of it shows anywhere on the page. Is that because I used jQuery to slide down the original footer (even though I deleted the old footer tag prior to creating a new one?)

metal03326 Over a year ago

If you see the content inside of the inspector and not on the screen, then you have a styling issue - some CSS rule prevents you from seeing the content. It can be many things, from display: none, to position: absolute with coordinates outside of the screen. jQuery shouldn't be the problem, though.

Collectives™ on Stack Overflow

innerHTML not adding html content

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related