javascript - insideHTML 不添加 html 内容

Question

我相信我几乎可以完成这个工作了。我已经有一个页脚，但是当单击按钮时，它会随着内容一起向下滑动。在它滑落之后，我使用 JavaScript 删除了该页脚及其内容，并且创建了另一个页脚元素。我已将其附加到包含 div 中。当我检查检查器元素时，它显示新的页脚并且存在空的 div。但是，当我将innerHTML 添加到div 的id 时，它不会用代码填充它。这是 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;
        });
    });
});

Answer 1

替换

input.addInnerHTML = newFooterContent;

与

input.innerHTML = newFooterContent;

它应该可以工作