CODEWITHSUNDEEP
javascriptjqueryhtmlinnerhtml
user5096599
user5096599

Reputation:

innerHTML not adding html content

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;
        });
    });
});

Upvotes: 0

Views: 1267

Answers (1)

metal03326
metal03326

Reputation: 1263

Replace

input.addInnerHTML = newFooterContent;

with

input.innerHTML = newFooterContent;

and it should work

Upvotes: 1

Related Questions