innerHTML 不添加 html 内容答案

【问题标题】：innerHTML not adding html contentinnerHTML 不添加 html 内容
【发布时间】：2015-09-17 02:48:05
【问题描述】：

我相信我几乎可以完成这项工作。我已经有一个页脚，但是当单击该按钮时，它会连同其内容一起向下滑动。在它向下滑动后，我使用 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;
        });
    });
});

【问题讨论】：

是不是因为你使用 addInnerHTML 而不是 innerHTML？
如果您使用的是 jQuery，那么为什么不使用 input.html(newFooterContent) 等等。

标签： javascript jquery html innerhtml

【解决方案1】：

替换

input.addInnerHTML = newFooterContent;

与

input.innerHTML = newFooterContent;

它应该可以工作

【讨论】：

这在某种意义上起作用，当我检查检查器元素时，它显示所有内容现在都在新的页脚部分中，但是 - 它没有显示在页面上的任何地方。那是因为我使用 jQuery 将原始页脚向下滑动（即使我在创建新页脚之前删除了旧的页脚标记？）
如果您在检查器中看到内容而不是在屏幕上，那么您有样式问题 - 某些 CSS 规则会阻止您看到内容。它可以是很多东西，从 display: none 到 position: absolute ，坐标在屏幕外。不过，jQuery 应该不是问题。